欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue transition 结合 animate.css 实现动画过渡

程序员文章站 2024-03-25 12:55:10
...

在vue组件中实现一些过渡动画是很常见的,有时候使用一些css库也是很正常的,今天就简单的说一下在vue组件中使用transition与animate.css结合的用法

  1. 安装animate.css

    cnpm install animate.css –save

    当然也可以将animate.css文件下载下来
    下载animate.css
    放进assets文件夹以供调用

  2. 调用animate.css

    import ‘animate.css’

    或者

    import ‘../../assets/animate.css’

  3. 设置类名
    在transition 标签中设置自定义css类名,详情看这里 ,如下:

<template>
    <div id="app">
        <button @click="show = !show">隐藏/显示</button>
         <transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" >
            <p v-if="show">hello word,I love China</p>
        </transition>
    </div>
</template>
<script>
    import $ from 'jquery'
    import 'animate.css'
    export default {
        data(){
            return {
                show:true,
            }
        },
        components:{
            tabA,
            tabB
        }
    }
</script>
<style scoped>
    #app{
        margin-left: 500px;
    }
</style>

具体animate.css的api可以看这里,生动形象具体随意选择 animate.css API

上一篇: js闪烁效果

下一篇: