vue使用css库,Vue中使用animate.css库

Vue中使用animate.css库

先来看一个例子，要实现的效果是文字弹跳放大在缩小显现和隐藏：

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

title在vue中使用Animate.css库/title

link rel="stylesheet" href="../animate.css"

script src="../vue.js"/script

style

@keyframes bounce-in {

0% {

transform:scale(0);

}

50% {

transform: scale(1.5);

}

100% {

transform: scale(1);

}

}

.fade-enter-active { /*在div隐藏的过程中这个class是一直存在的*/

transform-origin: left center;

animation: bounce-in 1s;

}

.fade-leave-active{ /*在div显示的过程中这个class是一直存在的*/

transform-origin:left center;

animation: bounce-in 1s reverse;

}

/style

/head

body

div id="root"

transition name="fade"

div v-if="show"hello world/div

/transition

button @click="handleClick"toggle/button

/div

script

var vm=new Vue({

el:"#root",

data:{

show:true

},

methods:{

handleClick:function () {

this.show=!this.show

}

}

})

/script

/body

/html

代码解析：①使用@keyframes定义一个keyframesCSS3动画,以百分比来规定改变发生的时间,0% 是动画的开始时间，100% 动画的结束时间。

②在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理。transform: scale(1.5)表示缩放倍数为1.5倍。

③在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。

使用CSS3可以完成一些简单的动画效果，但是每次都需要自己手写既麻烦又伤脑，而引入animate.css库之后就不需要自己写动画的样式或者效果。

Animate.css是一个基于css3 animation动画库，库中预设了几乎所有日常开发中的需求

在使用animate.css库之前，我们可以通过以下 attribute 来自定义过渡类名：

enter-class

enter-active-class

enter-to-class

leave-class

leave-active-class

leave-to-class

他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如Animate.css结合使用十分有用。

例如上述代码可以使用自定义过渡类名:

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

title在vue中使用Animate.css库/title

link rel="stylesheet" href="../animate.css"

script src="../vue.js"/script

style

@keyframes bounce-in {

0% {

transform:scale(0);

}

50% {

transform: scale(1.5);

}

100% {

transform: scale(1);

}

}

.active { /*在div隐藏的过程中这个class是一直存在的*/

transform-origin: left center;

animation: bounce-in 1s;

}

.leave{ /*在div显示的过程中这个class是一直存在的*/

transform-origin:left center;

animation: bounce-in 1s reverse;

}

/style

/head

body

div id="root"

transition name="fade" enter-active-class="active" leave-active-class="leave"

div v-if="show"hello world/div

/transition

button @click="handleClick"toggle/button

/div

script

var vm=new Vue({

el:"#root",

data:{

show:true

},

methods:{

handleClick:function () {

this.show=!this.show

}

}

})

/script

/body

/html

Animate.css的简单使用：

1.首先要在官网下载animate.css的文件：链接地址(https://daneden.github.io/animate.css)，然后将该文件通过link方式引入到html或者vue页面

2.在transition标签中自定义过渡类名，新定义的类名要包含animated 动画名

!-- 光加animated是没用的，加了animated只是告诉使用animate库里的动画效果 --

transition name="fade" enter-active-class="animated swing" leave-active-class="animated shake"

div v-show="show"Hello World/div

/transition

button @click="handleClick"toggle/button

注意：在3.x版本时，基本类 都是加animated，在4.x版本 加 animate__animated，就是要加animate__前缀。

Vue中使用animate.css库 相关文章

删除远程分支

删除本地分支 在删除分支的时候,我们会使用git branch --delete dev来执行.有时还会通过缩写git branch -d dev来代替,使用中我们发现还有git branch -D dev的写法,他们有什么区别呢 -d是--delete的缩写,在使用--delete删除分支时,该分支必须完全和它的上游分

iOS 内存管理

面试题 1.使用CADisplayLink NSTimer 有什么注意点 一般我们在使用NSTimer 或者 CADisplayLink 的时候，对象都会持有定时器。那么我们在这样使用的时候 self.link = [CADisplayLink displayLinkWithTarget:self selector:@selector(linkTest)];self.timer =

Java 多线程的使用

多线程的使用 一，继承Thread类 构造方法: 方法名 说明 Thread() 分配新的Thread对象。 Thread(String name) 分配新的Thread对象，将指定的name作为其线程名称。 常用方法： 方法名 说明 void start() 使该线程开始执行：Java虚拟机调用该线程的run方法。 vo

page Object使用

使用page object模式的好处： 创建可跨多个测试用例共享的可重用代码 减少重复代码的数量 如果用户界面发生变化，修复只需要在一个地方进行更改 官网示例代码 PythonOrgSearch调用MainPage(main_page = page.MainPage(self.driver))将 driver 传到class Ba

年度账单h5 移动端兼容问题以及优化建议(vue)

定时器 vue实例中定义timer多余，创建的定时器代码和销毁定时器的代码没有放在一起，通常很容易忘记去清理这个定时器，不容易维护；建议使用this.$once(‘hook:beforeDestory’,()={}); _CountDownLoop() { let timer = null; timer = setInterval(() = { //

Python+Unittest接口自动化测试(三)--使用Unittest生成测试报告

1. 下载HTMLTestRunner，放到Python安装目录的Lib下 导入验证一下，没有报错，说明是成功的 二、代码实现部分 1. RunMain模块： #coding=utf-8import requestsimport jsonclass RunMain: """无构造器""" def send_get(self, url, data): res = requests.get(

git 使用手册

git 使用手册 设置只要输入一次密码 git config --global credential.helper cachegit config --global credential.helper store git 配置 git 配置文件的权重 仓库 全局 系统. pro/.git/config # 仓库配置 核心配置 [core]excludesfile = /Users/roach/.git

FFmpeg 接口使用 - 基础和转封装

作为开发者，使用 FFmpeg 主要分两部分：命令行工具和接口使用，本文讲解如何在 macOS 上交叉编译 FFmpeg，再将其集成到 Xcode 中，再初步介绍 FFmpeg 接口使用时会用到的常用结构，最后实际编写音视频文件转封装的代码。 交叉编译和集成 利用如下脚本交叉编

Soul 学习笔记---使用 nacos 实现数据同步下篇(十)

使用 nacos 进行数据同步时，首先 soul-admin 的 application.yml 文件配置使用 nacos 同步 sync:# websocket:# enabled: true# zookeeper:# url: localhost:2181# sessionTimeout: 5000# connectionTimeout: 2000# http:# enabled: true nacos: url: localh

Soul 学习笔记---使用 nacos 实现数据同步中篇(八)

昨天只是简单看下 nacos 同步那块代码，今天准备跑起来看看。 首先从官网下载 nacos ， nacos 下载很方便，这是 windows 下载地址。 下载解压到一个目录，当前目录打开 cmd 窗口，运行 startup.cmd -m standalone ，就可以启动 nacos 了，启动完成，浏览器访