前端过渡动画

前端过渡动画

vue3

1、组件进入视口时向上移动且渐显

1、创建js文件addViewportEffect.js

function slideDownEffect(element) {
    console.log("执行");
    element.style.transform = 'translateY(0)';
    element.style.opacity = '1';
}

/**
 * 添加视口效果到指定的类名元素上。
 * @param {string} className - 要添加效果的元素的类名。
 * @param {Function} [effectFunction=slideDownEffect] - 当元素即将进入视口时要执行的动画效果函数。
 * @param {string} [animatedClass='animated'] - 标记元素已执行动画效果的类名。
 */
function addViewportEffect(className, effectFunction = slideDownEffect, animatedClass = 'animated') {
    document.addEventListener('DOMContentLoaded', function() {
        var elements = document.querySelectorAll(className);

        function isInViewport(el) {
            var rect = el.getBoundingClientRect();
            var viewportBottom = window.innerHeight || document.documentElement.clientHeight;
            return rect.top <= viewportBottom;
        }

        function checkElements() {
            elements.forEach(function(el) {
                if (isInViewport(el) && !el.classList.contains(animatedClass)) {
                    effectFunction(el);
                    el.classList.add(animatedClass); // 标记元素已执行动画效果
                }
            });
        }

        // 使用IntersectionObserver代替scroll事件监听器
        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const element = entry.target;
                    effectFunction(element);
                    element.classList.add(animatedClass); // 动画完成后标记
                    observer.unobserve(element); // 动画完成后取消对该元素的观察
                }
            });
        }, {
            threshold: 0.1 // 在元素10%进入视口时触发
        });

        elements.forEach(el => {
            observer.observe(el);
        });
    });
}

// 导出函数，以便在其他文件中使用
export default addViewportEffect;

2、使用

先到需要这个效果的组件上创建一个class，内容如下：

.dx-01{
  opacity: 0;
  transform: translateY(200px);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}
<div class="dx-01">
    这是要执行效果的组件内容
</div>

然后在导入上面 js 的方法，并在页面创建时使用

<script>
import addViewportEffect from "@/utils/addViewportEffect.js";
export default {    
    mounted() {
        this.recommendsIndex = 0
        this.switchRecommend()
        addViewportEffect(".dx-01")
      },
}
</script>

此js方法可复用，记得每次设置不同的class才行，不然会重复。