vue2物体下落动画自定义指令

// 物体下落时回弹动画
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>