test/animation/使用第三方类实现动画.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 1 导入vue包 -->
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">

</head>

<body>
    <div id="app">
        <button @click="show=!show">toggle</button>

        <transition enter-active-class="animated bounceInDown"  leave-active-class="animated bounceOutDown">
            <div v-show="show" >
                <img width="300px" height="450px" src="http://www.wpxcloud.xyz/mm_facetoface_collect_qrcode_1528894470503.png">
            </div>
        </transition>
    </div>
    <script>
        //创建一个Vue实例
        //在导入包之后,在浏览器的内存中就多了一个vue构造函数
        var vm = new Vue({
            //el 表示,当前我们new的Vue实例,要控制那个区域
            el: '#app',
            //data 中存放的是el 属性中需要的数据
            data: {
                show:false,
                message: 'hello vue.js'
            }
        });
    </script>

</body>

</html>