vue和animate.css怎么结合使用

最新推荐文章于 2024-08-28 17:58:52 发布

dokill

最新推荐文章于 2024-08-28 17:58:52 发布

阅读量3.5k

点赞数

分类专栏： vue animation

本文链接：https://blog.csdn.net/dokill/article/details/72667770

版权

vue 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

animation

1 篇文章 0 订阅

订阅专栏

本文介绍如何在Vue项目中集成animate.css来实现页面元素的动画过渡效果。通过具体代码示例展示了按钮点击事件触发元素显示隐藏时的动画效果，并利用Vue的transition组件配合animate.css样式完成平滑过渡。

摘要由CSDN通过智能技术生成

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>