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

发布时间:2024年01月15日
// 物体下落时回弹动画
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>
文章来源:https://blog.csdn.net/weixin_42567389/article/details/135597666
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。