VueJS中添加多个元素到列表时添加过渡动画
Adding transition animation when adding multiple elements to the list in VueJS
所以,看看这个 fiddle。当向呈现的列表添加新的多个元素时,我想从 vue 功能添加过渡动画。我已经尝试使用属性 tag="div"
添加 transition-group
。但是,添加的元素仍然没有动画。有什么建议吗?
new Vue({
el: '#app',
data: {
items: [{
id: 1,
name: 'John'
},
{
id: 2,
name: 'Doe'
}
]
},
methods: {
add: function() {
let offset = this.items[this.items.length - 1].id
this.items.push({
id: offset + 1,
name: 'Jane'
}, {
id: offset + 2,
name: 'Dane'
})
}
},
components: {
customComp: {
props: ['name', 'id'],
template: '<p>Hi {{name}} + {{id}}</p>'
}
}
})
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */
{
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<button @click="add">Add</button>
<transition-group name="fade">
<custom-comp v-for="item in items" :key="item.id" :id="item.id" :name="item.name">
</custom-comp>
</transition-group>
</div>
您缺少与 fade
关联的 css 代码
所以,看看这个 fiddle。当向呈现的列表添加新的多个元素时,我想从 vue 功能添加过渡动画。我已经尝试使用属性 tag="div"
添加 transition-group
。但是,添加的元素仍然没有动画。有什么建议吗?
new Vue({
el: '#app',
data: {
items: [{
id: 1,
name: 'John'
},
{
id: 2,
name: 'Doe'
}
]
},
methods: {
add: function() {
let offset = this.items[this.items.length - 1].id
this.items.push({
id: offset + 1,
name: 'Jane'
}, {
id: offset + 2,
name: 'Dane'
})
}
},
components: {
customComp: {
props: ['name', 'id'],
template: '<p>Hi {{name}} + {{id}}</p>'
}
}
})
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */
{
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<button @click="add">Add</button>
<transition-group name="fade">
<custom-comp v-for="item in items" :key="item.id" :id="item.id" :name="item.name">
</custom-comp>
</transition-group>
</div>
您缺少与 fade