vue和animate.css怎么结合使用

vue结合animate的使用,页面初始化成功显示相应效果

    <script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js">script>
    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    <div id="box">
        <button @click="isShow=!isShow">CHANGEbutton>
        <transition enter-active-class="animated zoomInUp" leave-active-class="animated fadeOutRightBig">
            <v-tpl v-if="isShow">v-tpl>
        transition>
    div>
    <template id="tpl">
        <ul class="nav-up">
            <li><a href="">001a>li>
            <li><a href="">002a>li>
            <li><a href="">003a>li>
        ul>
    template>
    <script type="text/javascript">
        new Vue({
            el:'#box',
            data:{
                isShow:false
            },
            components:{
                'v-tpl':{
                    template:'#tpl'
                }
            },
            //页面挂载完毕时更改状态
            mounted(){
                this.isShow = true;
            }
        })
    script>

你可能感兴趣的:(vue,animation)