直播软件源码，实现页面滚动到可视区显示动画效果

直播软件源码，实现页面滚动到可视区显示动画效果

第一步先安装animate.css

- link引入方式，用的cdn

 

1	<br> <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css" rel="stylesheet"><br>

​

-第二种npm：

 

1	<br>npm install animate.css ;

 

//在main.js引入

 

1	import animated from 'animate.css'<br>Vue.use(animated)

 

注意！！！！！！！！！！！！！！！！

vue版本兼容性问题导致会动画不起作用！默认会安装4版本的

 

处理办法，安装对应低版本的动画插件：

 

1	<br>npm install animate.css@3.5.1 --save

 

第二部引入wowjs：

我是在组件中引入的WOW，当然你也可以在全局，全局引入记得挂载到vue原型上即可

 

1

<br>import { WOW } from "wowjs";<br> <br>  mounted() {<br>    //第一种写法，可以设置wow中属性<br>    this.$nextTick(() => {<br>      // 在dom渲染完后,再执行动画<br>      var wow = new WOW({<br>        boxClass: "wow", ///动画元件css类（默认为wow）<br>        animateClass: "animated", //动画css类（默认为animated）<br>        offset: 0, //到元素距离触发动画（当默认为0）<br>        mobile: true, //在移动设备上触发动画（默认为true）<br>        live: true, //对异步加载的内容进行操作（默认为true）<br>      });<br>      wow.init();<br>    });<br>    //第二种写法，默认属性<br>    // this.$nextTick(() => { // 在dom渲染完后,再执行动画<br>    // new WOW().init();<br>    //})<br>  },

 

 以上就是 直播软件源码，实现页面滚动到可视区显示动画效果，更多内容欢迎关注之后的文章