前端过渡动画

前端过渡动画

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才行，不然会重复。