前端过渡动画

前端过渡动画

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 = 0this.switchRecommend()addViewportEffect(".dx-01")},
}
</script>

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