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">CHANGE</button>
        <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="">001</a></li>
            <li><a href="">002</a></li>
            <li><a href="">003</a></li>
        </ul>
    </template>
    <script type="text/javascript">
        new Vue({
            el:'#box',
            data:{
                isShow:false
            },
            components:{
                'v-tpl':{
                    template:'#tpl'
                }
            },
            //页面挂载完毕时更改状态
            mounted(){
                this.isShow = true;
            }
        })
    </script>
Logo

前往低代码交流专区

更多推荐