Vue_使用animate.css库

Bertha 。 2022-05-20 22:10 215阅读 0赞

**一.@keyframs 动画**  
我们如何在Vue中使用@keyframs 动画？

<transition name='fa'>
        <div v-if="cssanimate">hello css animate1</div>
    </transition>
        <button @click='cssclick'>css动画</button>

在css中：

<style> @keyframes bounce-in{ 0%{ transform: scale(0); } 50%{ transform: scale(1.5); } 100%{ transform: scale(1); } } .fa-enter-active{ animation:bounce-in 1s; } .fa-leave-active{ animation:bounce-in 1s reverse; } </style>

就可以实现点击放大缩小的效果。  
**二.自定义类**  
在Vue中必须用Vue给我们设定的类名来实现动画效果么？  
不必，可以自己定义。例如 fa-leave-active 我们想要用active来代替

<transition name='fa' enter-active-class='active' leave-active-class='leave'>
     <div v-if="cssanimate">hello css animate</div>
     </transition>
     <button @click='cssclick'>css动画</button>

在CSS中：

.active{ animation:bounce-in 1s; }
    .leave{ animation:bounce-in 1s reverse; }

可以实现相同的效果  
  
**三.使用animate.css库**  
既然我们可以自己定义class的名字，那我们就可以在Vue中引用animate.css库啦

首先css的引入，记得在css的后缀名不能省略

import animated from './css/animate.css'

在使用animate.css库的时候，名字开头要为animated，后面跟animate动画库的动画名称。

<transition name='fade' enter-active-class='animated swing' leave-active-class='animated flash' >
      <div v-if="cssanimate">hello css animate</div>
    </transition>
      <button @click='cssclick'>css动画</button>

如此就可以实现动画效果了，引用第三方库就不需要我们手动编写css动画效果了。

使用第三方库注意点：

①.要用enter-active-class命名方式来使用动画库

②.要在命名加上animated

发表评论取消回复

表情：

评论列表（有 0 条评论，215人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue-——UI组件库使用

目录一、常用组件库 1.移动端常用UI组件库 2.PC端常用UI组件库二、以Element UI （饿了么为例）三、Element-UI 按需引入（关心引入组

本是古典何须时尚/ 2024年04月06日 12:04/ 0 赞/ 108 阅读

相关 Vue 第三方库的使用

1. 前言本小节我们将带大家学习如何在项目中使用第三方库。在日常的开发中，我们正在大量的使用第三方库。学会使用第三方库可以说是前端工程师最基本的技能。其实，使用第三方库

怼烎@/ 2024年03月30日 18:02/ 0 赞/ 98 阅读

相关 VUE框架使用第三方组件库和图标库内容------VUE框架

> npm install font-awesome > > npm install font-awesome > npm i element-ui -S

迷南。/ 2024年02月26日 05:24/ 0 赞/ 79 阅读

相关 vue使用Vant移动端组件库

Vant是一个轻量、可靠的移动端 Vue 组件库进入项目目录，安装Vant > npm i vant -S 在`main.js`引入引入`vant`，这

ゝ一世哀愁。/ 2023年02月13日 05:45/ 0 赞/ 19 阅读

相关 Vue中使用icon库，IconPark（字节）

> 与阿里 IconFont 有什么区别？ > > 1. IconFont图标数量非常丰富，支持用户侧上传图标及项目管理，IconPark是官方提供的规范化、统一化的高质量

- 日理万妓/ 2023年01月18日 14:20/ 0 赞/ 8 阅读

相关 vue中如何使用animate.css库

文章目录 1. 如何vue中使用keyframe动画 2. 如何自定义动画样式？ 3.如何使用animate.css库动画

秒速五厘米/ 2022年11月14日 14:37/ 0 赞/ 165 阅读

相关使用vue3打造一个物料库

点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群 ![6c51e8425cc2804c1eb739969a5b7247.png][] 来

旧城等待，/ 2022年10月05日 02:55/ 0 赞/ 123 阅读

相关 Vue_使用animate.css库

一.@keyframs 动画我们如何在Vue中使用@keyframs 动画？ <transition name='fa'> <div v-if=

Bertha 。/ 2022年05月20日 22:10/ 0 赞/ 216 阅读

相关 vue 使用vant库

1、引入 cnpm i vant -S cnpm i babel-plugin-import -D 2、配置按需加载

雨点打透心脏的1/2处/ 2021年07月25日 00:58/ 0 赞/ 380 阅读

相关 vue使用xe-utils通用函数库

目录一、xe-Utils介绍二、xe-utils API介绍 API全局参数基础函数常用函数日期函数高级函数浏览器函数三、如何全局使用xe-u

本是古典何须时尚/ 2021年07月24日 16:31/ 0 赞/ 1271 阅读