vue2中使用Animate.css动画插件

①安装

 Animate 官网

npm install animate.css --save

yarn add animate.css

或者直接下载

 ②引入

在main.js中

import animated from "animate.css";

Vue.use(animated)

或

 import 'animate.css';

也可以直接引入在需要用动画的组件中 

 import 'animate.css'

③使用

vue官网vue官网Transition

Transition | Vue.js

结合Vue 提供的使用动画。

Animate.css是一个纯CSS动画库，其核心技术使用了 CSS3 里的 @keyframes 和 animation。

注意：使用Animate.css类时，需要为类 enter-active-class 和 leave-active-class 设置进入和离开的类，且加基类animate__animated ，否者不起作用 。

如果初次进入页面就显示动画效果，在transition 标签上添加 appear 属性来实现。

这里是组件，用外盒子div把组件包裹占位置，最好根据内容写一个高度。不让样式乱掉。  也为了能让IntersectionObserver API监听目标元素，监听元素，首先保证元素在节点在。

.activeObserve{width: 100%;min-height: 766px;box-sizing: border-box;
}

 定义参数，让组件显示或隐藏。

data() {return {activeObserveshow:false,};
},

重要的点：

利用IntersectionObserver API监听目标元素是否可见。

如果可见就让组件显示出来，随之触发动画，注意要取消观察目标元素，不然会一直观察。

参考阮一峰的网络日志 ：IntersectionObserver API 使用教程

mounted(){// 创建一个IntersectionObserver实例const observer = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {// 目标元素可见if (entry.isIntersecting) {if(entry.target.className.includes('activeObserve')){this.activeObserveshow=true// 取消观察目标元素observer.unobserve(document.querySelector('.activeObserve'));}//if(entry.target.className.includes('carouselObserve')){//console.log("carouselObserve");//this.carouselObserveshow=true// 取消观察目标元素//observer.unobserve(document.querySelector('.carouselObserve'));//return//}}else {console.log('目标元素不可见');}});}, {root: null,   // 监听窗口滚动rootMargin: '0px',  // 根据需要调整触发时机threshold: 0.25,  // 目标元素交叉比例达到25%时触发});// 观察目标元素observer.observe(document.querySelector('.activeObserve'));}

 也可以手写动画：

利用动态样式是为了让元素的节点在页面上，以便观察。

如果目标元素出现在页面上了，就添加动画类，动画类要自己写。如下： 

entry.target.classList.add('fadeInRight');

 动画：从右边进入。

.fadeInRight {animation: fadeInRight 1s linear;
}@keyframes fadeInRight {0% {opacity: 0;transform: translate3d(100%,0,0);}100% {opacity: 1;transform: translateZ(0);}
}

 animate.css也提供其他属性：

1.设置动画延迟，animate.css 提供了从 1s 到 5s 的延迟类。

• animate__delay-1s

.myAniDelay500ms{animation-delay: 500ms;
}

2.控制动画持续时间 ，默认的动画时间是 1s，

• animate__slow 2s

• animate__slower 3s

• animate__fast 800ms

• animate__faster 500ms

.myAniDuration500ms{animation-duration: 500ms;
}

3.控制动画次数 ，默认动画执行次数为 1

• animate__repeat-1 1

• animate__repeat-2 2

• animate__repeat-3 3

• animate__infinite infinite，无限次数。 

 这些也可以使用添加类的方式来添加，比如：

.myAniTimes10{animation-iteration-count: 10;
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！