vue中wow.js的使用
文章 7666 0 0 0
发布时间:2018年09月12日

概述

刚开始我是通过在index页面直接引入wow.js效果,第一天可以,但是第二天就不行了,看了一下代码的前端执行结果发现动画的名称是none,那问题出现在了没有找到动画名称,为什么会出现这样的我想应该是加载顺序导致的,wow.js在页面加载完以后便已经执行了,但是我的数据还没有获取到所有才出现了数据被display:none;

所以采用了事件监听的方式当数据改变的时候我们再去执行动画
(1)通过npm安装:

npm install wowjs —save-dev

animate.css会自动安装。

(2)在main.js中引入animate.css

import 'animate.css'

在组件需要的地方引入wowjs

有两种使用方式:

import {WOW} from 'wowjs'    mounted() { new WOW().init() }
import WOW from 'wowjs'    mounted() { new WOW.WOW().init() }

下面给出在实例中的应用:

<template>
    <div class="caselist">
        <ul class="clearfix">
            <li class="wow slideInUp" v-for="(item, index) in cases" :key="index"></li>
        </ul>
    </div>
</template>
<script type="text/ecmascript-6">
    import {WOW} from 'wowjs'
    export default {
        props: ['cases'],
        watch: {
            cases() {
                this.$nextTick(() => { // 在dom渲染完后,再执行动画
                    var wow = new WOW({live: false})
                    wow.init()
                })
            }
        }
    }
</script>
评论专区