Thành phần Vue <TransitionGroup>
Ví dụ
Sử dụng thành phần <TransitionGroup>
tích hợp để tạo thẻ <ol>
với các thẻ <li>
động bên trong.
<TransitionGroup tag="ol">
<li v-for="x in products" :key="x">
{{ x }}
</li>
</TransitionGroup>
Chạy ví dụ »Xem thêm ví dụ dưới đây.
Định nghĩa và cách sử dụng
Thành phần <TransitionGroup>
tích hợp sẵn được sử dụng xung quanh các phần tử được tạo bằng v-for
, để cung cấp cho các phần tử này các hình ảnh động riêng lẻ khi chúng được thêm hoặc xóa.
Các thẻ được tạo bằng v-for
bên trong thành phần <TransitionGroup>
phải được xác định duy nhất bằng thuộc tính key
.
Thành phần <TransitionGroup>
chỉ được hiển thị dưới dạng thẻ HTML nếu chúng tôi xác định nó là một thẻ cụ thể bằng cách sử dụng tag
prop.
Khi các thẻ được tạo bên trong thành phần <TransitionGroup>
với v-for
dựa trên một mảng, các thẻ này sẽ tự động hoạt hình khi các phần tử được thêm vào hoặc xóa khỏi mảng.
đạo cụ
Thành phần <TransitionGroup>
tích hợp có thể được sử dụng với cùng các props như thành phần <Transition>
tích hợp sẵn, nhưng cũng chấp nhận name
và các props moveClass
:
Prop | Description | |
---|---|---|
none | Default. | Run Example » |
tag | <TransitionGroup> is rendered to be the tag specified. If the tag prop is not set, <TransitionGroup> will not be rendered as a tag. |
Run Example » |
moveClass | Creates a custom name for the move class. The default name for the move class is v-move . |
Run Example » |
Thêm ví dụ
ví dụ 1
Xúc xắc có thể được thêm hoặc xóa, xúc xắc được thêm vào sẽ hoạt hình bằng cách sử dụng <TransitionGroup>
.
<template>
<h3>The <TransitionGroup> Component</h3>
<p>New products are given animations using the <TransitionGroup> component.</p>
<button @click="addDie">Roll</button>
<button @click="removeDie">Remove random</button><br>
<TransitionGroup>
<div v-for="x in dice" :key="x" class="diceDiv" :style="{ backgroundColor: 'hsl('+x*40+',85%,85%)' }">
{{ x }}
</div>
</TransitionGroup>
</template>
<script>
export default {
data() {
return {
dice: [],
inpName: ''
}
},
methods: {
addDie() {
const newDie = Math.ceil(Math.random()*6);
this.dice.push(newDie);
},
removeDie() {
if(this.dice.length>0){
this.dice.splice(Math.floor(Math.random()*this.dice.length), 1);
}
}
},
mounted() {
this.addDie();
this.addDie();
this.addDie();
}
}
</script>
<style>
.v-enter-from {
opacity: 0;
translate: 200px 0;
rotate: 360deg;
}
.v-enter-to {
opacity: 1;
translate: 0 0;
rotate: 0deg;
}
.v-enter-active,
.v-leave-active {
transition: all 0.7s;
}
.v-leave-from { opacity: 1; }
.v-leave-to { opacity: 0; }
.diceDiv {
margin: 10px;
width: 30px;
height: 30px;
line-height: 30px;
vertical-align: middle;
text-align: center;
border: solid black 1px;
border-radius: 5px;
display: inline-block;
}
</style>
Chạy ví dụ »Ví dụ 2
Xúc xắc có thể được thêm hoặc xóa, cả xúc xắc được thêm và xóa đều được tạo hình động bằng cách sử dụng <TransitionGroup>
.
<template>
<h3>The <TransitionGroup> Component</h3>
<p>When an item is removed inside the <TransitionGroup> component, other items are animated as they fall into their new positions.</p>
<button @click="addDie">Roll</button>
<button @click="removeDie">Remove random</button><br>
<TransitionGroup>
<div v-for="x in dice" :key="x" class="diceDiv" :style="{ backgroundColor: 'hsl('+x*40+',85%,85%)' }">
{{ x }}
</div>
</TransitionGroup>
</template>
<script>
export default {
data() {
return {
dice: [],
inpName: ''
}
},
methods: {
addDie() {
const newDie = Math.ceil(Math.random()*6);
this.dice.push(newDie);
},
removeDie() {
if(this.dice.length>0){
this.dice.splice(Math.floor(Math.random()*this.dice.length), 1);
}
}
},
mounted() {
this.addDie();
this.addDie();
this.addDie();
}
}
</script>
<style>
.v-enter-from {
opacity: 0;
translate: 200px 0;
rotate: 360deg;
}
.v-enter-to {
opacity: 1;
translate: 0 0;
rotate: 0deg;
}
.v-enter-active,
.v-leave-active,
.v-move {
transition: all 0.7s;
}
.v-leave-active { position: absolute; }
.v-leave-from { opacity: 1; }
.v-leave-to { opacity: 0; }
.diceDiv {
margin: 10px;
width: 30px;
height: 30px;
line-height: 30px;
vertical-align: middle;
text-align: center;
border: solid black 1px;
border-radius: 5px;
display: inline-block;
}
</style>
Chạy ví dụ »Ví dụ 3
Xúc xắc có thể được thêm vào, loại bỏ xáo trộn hoặc sắp xếp, tất cả đều hoạt hình bằng cách sử dụng <TransitionGroup>
.
<template>
<h3>The <TransitionGroup> Component</h3>
<p>Items inside the <TransitionGroup> component are animated when they are created or removed.</p>
<button @click="addDie">Roll</button>
<button @click="addDie10">Roll 10 dice</button>
<button @click="dice.sort(compareFunc)">Sort</button>
<button @click="dice.sort(shuffleFunc)">Shuffle</button><br>
<TransitionGroup>
<div
v-for="x in dice"
:key="x.keyNmbr"
class="diceDiv"
:style="{ backgroundColor: 'hsl('+x.dieNmbr*60+',85%,85%)' }"
@click="removeDie(x.keyNmbr)">
{{ x.dieNmbr }}
</div>
</TransitionGroup>
</template>
<script>
export default {
data() {
return {
dice: [],
keyNumber: 0
}
},
methods: {
addDie() {
const newDie = {
dieNmbr: Math.ceil(Math.random()*6),
keyNmbr: this.keyNumber
};
this.dice.splice(Math.floor(Math.random()*this.dice.length),0,newDie);
this.keyNumber++;
},
addDie10() {
for(let i=0; i<10; i++) {
this.addDie();
}
},
compareFunc(a,b){
return a.dieNmbr - b.dieNmbr;
},
shuffleFunc(a,b){
return Math.random()-0.5;
},
removeDie(key) {
const pos = this.dice.map(e => e.keyNmbr).indexOf(key);
this.dice.splice(pos, 1);
}
},
mounted() {
this.addDie10();
}
}
</script>
<style>
.v-enter-from {
opacity: 0;
scale: 0;
rotate: 360deg;
}
.v-enter-to {
opacity: 1;
scale: 1;
rotate: 0deg;
}
.v-enter-active,
.v-leave-active,
.v-move {
transition: all 0.7s;
}
.v-leave-active { position: absolute; }
.v-leave-from { opacity: 1; }
.v-leave-to { opacity: 0; }
.diceDiv {
margin: 10px;
width: 30px;
height: 30px;
line-height: 30px;
vertical-align: middle;
text-align: center;
border: solid black 1px;
border-radius: 5px;
display: inline-block;
}
.diceDiv:hover {
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#app {
position: relative;
}
</style>
Chạy ví dụ »Ví dụ 4
Lớp di chuyển được đổi tên bằng cách sử dụng prop moveClass
.
<template>
<h3>The <TransitionGroup> Component</h3>
<p>When an item is removed inside the <TransitionGroup> component, other items are animated as they fall into their new positions.</p>
<button @click="addDie">Roll</button>
<button @click="removeDie">Remove random</button><br>
<TransitionGroup moveClass="good-slide">
<div
v-for="x in dice"
:key="x"
class="diceDiv"
:style="{ backgroundColor: 'hsl('+x*40+',85%,85%)' }"
>
{{ x }}
</div>
</TransitionGroup>
</template>
<script>
export default {
data() {
return {
dice: [],
inpName: ''
}
},
methods: {
addDie() {
const newDie = Math.ceil(Math.random()*6);
this.dice.push(newDie);
},
removeDie() {
if(this.dice.length>0){
this.dice.splice(Math.floor(Math.random()*this.dice.length), 1);
}
}
},
mounted() {
this.addDie();
this.addDie();
this.addDie();
}
}
</script>
<style>
.v-enter-from {
opacity: 0;
translate: 200px 0;
rotate: 360deg;
}
.v-enter-to {
opacity: 1;
translate: 0 0;
rotate: 0deg;
}
.v-enter-active,
.v-leave-active,
.good-slide {
transition: all 0.7s;
}
.v-leave-active { position: absolute; }
.v-leave-from { opacity: 1; }
.v-leave-to { opacity: 0; }
.diceDiv {
margin: 10px;
width: 30px;
height: 30px;
line-height: 30px;
vertical-align: middle;
text-align: center;
border: solid black 1px;
border-radius: 5px;
display: inline-block;
}
</style>
Chạy ví dụ »Trang liên quan
Hướng dẫn Vue: Hoạt hình Vue
Hướng dẫn Vue: Vue Animations với v-for
Hướng dẫn Vue: Chỉ thị Vue v-for
Hướng dẫn Vue: Vue v-for Components
Tham khảo Vue: Thành phần Vue <Transition>