有没有办法让 Vue 在新元素进入之前等待元素离开列表?此时,新元素进入列表的动画与元素离开列表的动画同时播放:
var SPEED = 3;
var app = new Vue({
el: '.container',
data: {
nodes: [
{id: 0, value: 5, name: "Alan"},
{id: 1, value: 15, name: "Bob"},
{id: 2, value: 25, name: "Charles"}
]
},
methods: {
enter(el, done) {
var bar = $(el).children(".bar");
TweenMax.fromTo(bar, SPEED, {width: 0}, {width: $(el).attr("width") * 10, onComplete: done});
},
leave(el, done) {
var bar = $(el).children(".bar");
TweenMax.fromTo(bar, SPEED, {width: $(el).attr("width") * 10}, {width: 0, onComplete: done});
},
swapBobDave() {
this.nodes = [
{id: 0, value: 5, name: "Alan"},
{id: 2, value: 25, name: "Charles"},
{id: 3, value: 35, name: "Dave"}
];
},
reset() {
this.nodes = [
{id: 0, value: 5, name: "Alan"},
{id: 1, value: 15, name: "Bob"},
{id: 2, value: 25, name: "Charles"}
];
}
}
});
body {
margin: 30px;
font-family: sans-serif;
}
.bar {
background-color: pink;
padding: 10px;
margin: 10px;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h1>Vue JS Hooks</h1>
<transition-group name="list" tag="div" v-on:enter="enter" v-on:leave="leave" v-bind:css="false" appear>
<div v-for="(node, index) in nodes" v-bind:key="node.id" v-bind:width="node.value">
<div class="bar" v-bind:style="{width: node.value + '%'}">{{node.name}}</div>
</div>
</transition-group>
<button type="button" class="btn btn-default" @click="swapBobDave">Add Dave and remove Bob</button>
<button type="button" class="btn btn-default" @click="reset">Reset</button>
</div>
解释为什么离开栏在消失前没有到达width: 0
的加分项!
最佳答案
它是一个transition-group
,所以对数组的每次更改都是不同的动画。如果您总是添加一个元素然后删除另一个元素,您可以使用 enter
Hook 上的 setTimeout 实现它,具有相同的 SPEED
持续时间。
enter(el, done) {
window.setTimeout( () => {
var bar = $(el).children(".bar");
TweenMax.fromTo(bar, SPEED, {width: 0}, {width: $(el).attr("width") * 10, onComplete: done});
}, SPEED * 1000 )
},
我还建议您按以下方式更改数组
swapBobDave() {
this.nodes.splice(1,1);
this.nodes.push({id: 3, value: 35, name: "Dave"});
},
关于栏,它达到了 width: 0
但在 css 中有 padding: 10px
。要修复它,您可以直接向其中的文本添加边距,并删除栏上的填充。
希望对你有帮助。
关于javascript - 带有 Greensock JS 钩子(Hook)的 Vue 列表动画 : wait for leave to finish before enter,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56004995/