// 物体下落时回弹动画
Vue.directive('fallanimate', {
bind(el, binding) {
el.style.transform = `translate(0px, ${binding.value.defaultTop}px)`;
el.style.transition = `translate ${binding.value.initSpeed}s`;
el.style.opacity = 0;
},
inserted(el, binding) {
let count = 0;
const changeTranslateY = (el, y) => {
el.style.transform = `translate(0px, ${y}px)`;
el.style.transition = `translate ${binding.value.springSpeed}s`;
count += 1;
if (count < binding.value.springCount) {
setTimeout(() => {
changeTranslateY(el, y == 0 ? (count - binding.value.springCount) * 10 : 0);
}, (binding.value.springSpeed * 1000) / 2);
}
};
setTimeout(() => {
el.style.opacity = 1;
changeTranslateY(el, 0);
}, binding.value.delay);
}
});
使用方式
<div :class="['list' + (i + 1), 'list']" v-for="(item, i) in rightOneObj.data" :key="i" v-fallanimate="{
delay: 200*(i+1) + 800, //动画延迟时间
defaultTop: -200, //初始高度
initSpeed: 0.5, //初始下落速度
springSpeed: 0.2, //回弹速度
springCount: 2 // 回弹次数
}">
<p v-html=" item.name "></p>
</div>