当前位置: 首页 > 工具软件 > Animate.css > 使用案例 >

在vue2中使用animate.css动画

荆树
2023-12-01

安装

npm install animate.css --save

在main.js引入

// animate.css  引入动画插件
import animated from 'animate.css'
Vue.use(animated);

其他组件使用需要加上animate__ 前缀

要想使用animate.css, 需要把相关标签用
<transition>.....</transition> 
进行包裹,只能包裹单个标签。
使用
<transition-group>.....</transition-group>
可以包裹多个标签,注意一定要加key 这个属性值
appear :表示一上来就有动画效果。相当于:
:appear = 'true'
		 <!--  分开设置入场`enter`和离场`leave`的运行时长  -->
		<transition   appear  name="animate__animated animate__bounce"
		        enter-active-class="animate__slideInUp"
		        leave-active-class="animate__zoomOut" 
				:duration="{ enter:200, leave:1500 }" >
		        <div class="carInfo"  v-if="show">
		        	<el-button @click="show=false">送货</el-button>
		        </div>
		</transition>
 类似资料: