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

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

第一步先安装animate.css

- link引入方式，用的cdn

 

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

​

-第二种npm：

 

npm install animate.css ;

 

//在main.js引入

 

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

 

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

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

 

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

 

npm install animate.css@3.5.1 --save 

 

第二部引入wowjs：

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

 

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

 

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