wow.js的使用方式

wowjs的使用方式

例子

   <el-row class="header-main wow bounceInDown">
   </el-row>
 ** 需要的动画里面 class 里面 添加 wow 然后在添加动画样试 bounceInDown **

方式一

第一步：安装 cnpm install wowjs --save-dev
第二步：在 main.js 中 引入 css 样式 ‘import ‘wowjs/css/libs/animate.css’’
第三步：在组件中使用

    import { WOW } from 'wowjs'
    mounted() {
        var wow = new WOW({
        boxClass: "wow",    //需要执行动画的元素的 class
        animateClass: "animated", // animation.css 动画的 class
        offset: 0, // 距离可视区域多少开始执行动画
        mobile: true, // 是否在移动设备上执行动画
        live: true // 异步加载的内容是否有效
        })
        wow.init();
     },
   // 或者 
   methods: {
 	initWowAnimate() {
    	const wow = new WOW({
        	boxClass: "wow",    //需要执行动画的元素的 class
        	animateClass: "animated", // animation.css 动画的 class
        	offset: 0, // 距离可视区域多少开始执行动画
        	mobile: true, // 是否在移动设备上执行动画
        	live: false // 异步加载的内容是否有效
    })
    wow.init()
    }
 }
  watch: {
	  $route(to, from) {
	    if (to) {
	        console.log('路由改变了----》', to)
	        this.$nextTick(() => {
	            this.initWowAnimate()
	        })
	    }
    }

方式 二

第一步：安装 cnpm install wowjs --save-dev
第二步：在 main.js 中 引入 css 样式 ‘import ‘wowjs/css/libs/animate.css’’
第三步：在 main.js 中 挂载 wow ‘Vue.prototype.$wow=wo{w}^{\prime }第四步：在使用页面初始化中的mounted函数中初始{化}^{\prime }newthis.$wow.WOW().init()’

    import { WOW } from 'wowjs'
    mounted() {
    	new this.$wow.WOW().init()
},

参数 可写 可不写

data-wow-duration=‘2s’（动画持续时间)

data-wow-delay=‘1s’（动画延迟时间）

data-wow-offset=‘100’（元素的位置露出后距离底部多少像素执行）

data-wow-iteration=‘10’（动画执行次数）这四个属性可选可不选。

Vue transition 动画

自定义动画类名

<transition enter-active-class="enter-active" leave-active-class="leave-active"> 
      <router-view />
</transition>

<style lang="scss" scoped>
.enter-active {
    animation: bounce-in 0.5s;
}
.leave-active {
    animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
</style>

官方demo

在 pubilc 中引入 cdn 链接
https://cdn.jsdelivr.net/npm/animate.css@3.5.1

 <transition :duration="{ enter: 1000, leave: 3000 }" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
     <router-view />
 </transition>

animate 动画

安装 animate cnpm install animate.css@3.5.1 --save
main.js 中引入 import “animate.css”

 <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceInRight">
      <router-view />
</transition>