标签：动画 vue 展示 使用 import animate css

vue使用动画animate

animate官网地址：https://animate.style/

（一）简介：

使用动画一般都是使用动画库吧，不然自己写吗？现在的库太多了，用的话很方便，但是确也一直限制住了自己，还是得自己去进去

（二）使用：

安装库

npm install animate.css --save

在main.js中引入使用

import animated from 'animate.css'
Vue.use(animated)

在页面文件上就可以通过class名称直接获取动画
在官网上可以直接通过复制获取class名称 进行动画展示

 <div class="animate__animated animate__bounceInLeft">
       
 </div>

（三）切换展示动画

在使用的时候一般动画都是要首次进入才会展示动画 ，但有时候我们需要进行手动触发一下，所以我们就显示隐藏一下。
这样就可以：

 this.showHide = false;
 setTimeout(() => {
    this.showHide = true;
 }, 100);

（四）滚动到指定位置展示动画

需要使用插件 但是我没有测试过

npm install wowjs --save-dev

<script>
import { WOW } from "wowjs"
import 'animate.css'
export default {
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    this.$nextTick(() => {
      new WOW({live: false}).init();
    });
  },
</script>

标签：动画,vue,展示,使用,import,animate,css
来源： https://www.cnblogs.com/tcz1018/p/15209291.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。