VUE基础知识16_vue flag != flag-优快云博客

本文介绍如何在Vue项目中使用第三方库animate.css实现动画效果。通过示例代码展示了如何利用Vue的transition组件结合自定义CSS动画实现元素的淡入淡出及缩放效果，并介绍了animate.css的安装与使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动画与过渡
geihub里面有个animate.css类库，有很多可以，集成三方。

<button @click="flag=!flag">切换</button>
<p></p>
<transition name="bounce">//fade就是方法名！
    <img v-if="flag" :src="pic" alt="">
</transition>

import pic from '@/assets/图片名.jpg' //导入图片,@自动到当前目录下面
data(){
    return{
        pic:pic,
        flag:true
    }
}

.bounce-enter-active{
    animation:bounce .5s;
}
.bounce-leave-active{
    animation:bounce reverse; //CSS基础比较重要！
}
@keyframes bounce{  //Js的基础知识
    0%{
        transform:scale(0);
    }
    50%{
        transform:scale(1.5);
    }
    100%{
    }
}

集成三方类库animate.css：open in terminal在终端打开，执行命令：npm install animate.css --save 它还有自己的官方文档：https://daneden.github.io/animate.css/

<button @click="flag=!flag">切换</button>
<p></p>
<transition enter-active-class = "animated tada" leave-active-class = "animated bounceOutRight" :duration="{enter:1000,leave=500}">
<!--在github的document中可以找到官方应用文档！上面的tada和animated标签组合使用！-->
<!--animate还有自己的官方文档：https://daneden.github.io/animate.css/！-->
    <img v-if="flag" :src="pic" alt="">
</transition>

import pic from '@/assets/图片名.jpg' //导入图片,@自动到当前目录下面
import animate from 'animate.css'//在Vue.js官方文档中，搜索‘#自定义过渡的类名’
data(){
    return{
        pic:pic,
        flag:true
    }
}

.bounce-enter-active{
    animation:bounce .5s;
}
.bounce-leave-active{
    animation:bounce reverse; //CSS基础比较重要！
}