animate.css版本升级前,在vue中做过渡动画时是这么用的(vue目前的开发文档对此也还未变更,下面这个是从vue2.x开发手册搬运而来的代码):Vue2.x开发手册中这么写的:link href=https://cdn.jsdelivr.net/npm/...
animate.css版本升级前,在vue中做过渡动画时是这么用的(vue目前的开发文档对此也还未变更,下面这个是从vue2.x开发手册搬运而来的代码):
Vue2.x开发手册中这么写的:
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<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文件,然后这么用:
<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__前缀,仔细看看官网有说,我自己先没仔细看:(
沃梦达教程
本文标题为:版本升级后的Animate.css如何在Vue中使用
基础教程推荐
猜你喜欢
- CSS3的几个标签速记(推荐) 2024-04-07
- 关于文字内容过长,导致文本内容超出html 标签宽度的解决方法之自动换行 2023-10-28
- vue离线环境如何安装脚手架vue-cli 2025-01-19
- Ajax实现动态加载数据 2023-02-01
- this[] 指的是什么内容 讨论 2023-11-30
- JS前端广告拦截实现原理解析 2024-04-22
- 浅谈Vue2和Vue3的数据响应 2023-10-08
- js禁止页面刷新与后退的方法 2024-01-08
- 浅析canvas元素的html尺寸和css尺寸对元素视觉的影响 2024-04-26
- 基于Vue制作组织架构树组件 2024-04-08
