版本升级后的Animate.css如何在Vue中使用

animate.css版本升级前,在vue中做过渡动画时是这么用的(vue目前的开发文档对此也还未变更,下面这个是从vue2.x开发手册搬运而来的代码):

Vue2.x开发手册中这么写的:
<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</div>

最近自己需要用到animate.css(当前版本:v4.1.1)做过渡动画,发现它版本升级后类名有变更,仅记录一下现在的animate.css如何用,怕自己又忘记,不会的小伙伴也可以参考一下。
首先到animate.css官网下载animate.min.css文件,然后在你的html文件里引入:

ps:下面是自己的代码复制过来的,和上面的不完全一致!
<link rel="stylesheet" type="text/css" href="css/animate.min.css" />

<div id="app">
	<transition 
		name="slide" 
		enter-active-class="animate__animated animate__bounce"
		leave-active-class="animate__animated animate__bounceOutRight">
		<div v-if="isShow" class="content"></div>
	</transition>
	<button type="button" @click="toggleEvent">切换</button>
</div>

animated–>animate__animated
bounceOutRight–>animate__bounceOutRight

所以,区别主要是现在的类名前加上了animate__前缀,仔细看看官网有说,我自己先没仔细看:(

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值