vue 的动画
1、vue 的动画流程分为enter，和leave分别对应以下两幅图
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动画</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
<style>
.yf-enter, .yf-leave-to {
opacity: 0;
} .yf-enter-active, .yf-leave-active {
transition: opacity 2s;
}
</style>
<script src="./lib/vue.js"></script>
<script>
window.onload = function () {
let VM = new Vue({
el: '#outdiv',
data: {
content: 'this is test content',
show: false
},
methods: {
change() {
this.show = !this.show;
}
}
})
}
</script>
</head>
<body>
<div class="container" id="outdiv">
<!--如果没有指定name那么默认为v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active-->
<!--如果定义了name那么默认为name-enter,name-enter-to,name-enter-active,name-leave,name-leave-to,name-leave-active-->
<!--当show为true的时候，即enter时opacity被赋值为0，随着动画的进行，yf-enter被删除掉那么opacity为1，同时定义的transition便起作用了-->
<!--当show为false的时候，即leave时yf-leave的opacity为1，当动画进行时yf-leave-to的opacity为0，同时定义的transition便起作用了-->
<!--如果要定义顺序，那么可以添加mode='in-out'或者mode='out-in'这个通常在多个组件之间切换时运用-->
<transition name="yf">
<div class="jumbotron" v-if="show">{{content}}</div>
</transition>
<input type="button" value="切换" class="btn btn-primary" @click="change">
</div>
</body>
</html>
2、如果添加自定义动画，如引入animate.css动画
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
<link rel="stylesheet" href="./lib/animate.css">
<style>
v-enter, v-leave-to {
opacity: 0;
} v-enter-active, v-leave-active {
transition: opacity 3s;
}
</style>
<script src="./lib/vue.js"></script>
<script>
window.onload = function () {
let VM = new Vue({
el: '#outdiv',
data: {
content: 'this is a text',
show: true },
methods: {
change() {
this.show = !this.show;
}
}
})
}
</script>
</head>
<body>
<div class="container" id="outdiv">
<!--添加自定义的类，那么enter-active-class与leave-active-class可以赋值自定义的类名-->
<!--如果需要指定刷新页面时的动画，那么需要指定两个类，appear与appear-active-class,用法同enter-active-class一样-->
<!--因为animate.css是keyframe动画，那么需要添加过渡动画，那么就需要添加默认的(name|v)-active-class这个类--->
<!--指定动画时长，如果以transition的动画时长为主，那么可以指定一个type值为transition毕竟animate.css的动画时长只有1s-->
<!--如果需要定义一个明确的动画时长，可以添加属性:duration="{enter:5000,leave:3000}"注意以毫秒为单位，更简单的写法就指定一个值表示进入和离开的时间:duration="3000"-->
<transition
type="transition"
appear
appear-active-class="animated zoomInDown v-enter-active"
enter-active-class="animated zoomInDown v-enter-active"
leave-active-class="animated zoomOutUp v-leave-active">
<div class="jumbotron" v-if="show">{{content}}</div>
</transition>
<input type="button" value="点击" class="btn btn-primary" @click="change">
</div>
</body>
</html>
3、指定js的动画
通过transition这个标签的6个钩子函数执行动画before-enter,enter,after-enter,before-leave,leave,after-leave注意在每个enter或者leave的时候,会传入两个参数一个是执行动画的本体一个是函数,执行完动画后执行这个函数表示动画已经执行完毕,其余的只有一个函数表示动画执行的本体.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
<link rel="stylesheet" href="./lib/animate.css">
<script src="./lib/vue.js"></script>
<script src="./lib/jquery.js"></script>
<script>
window.onload = function () {
let VM = new Vue({
el: '#outdiv',
data: {
show: true,
content: 'this is test content'
},
methods: {
change() {
this.show = !this.show;
},
beforeEnter(elem) {
$(elem).css('display', 'none');
},
handleEnter(elem, done) {
$(elem).fadeIn(400, () => {
done();
});
},
afterLeave(elem) {
console.log('this is leave');
console.log(arguments);
}
}
})
}
</script>
</head>
<body>
<div class="container" id="outdiv">
<transition
@before-enter="beforeEnter"
@enter="handleEnter"
@after-leave="afterLeave"
>
<div class="jumbotron" v-if="show">{{content}}</div>
</transition>
<div class="form-group">
<div><input type="button" value="切换" class="btn btn-primary" @click="change"></div>
</div>
</div>
</body>
</html>
4、如果是多个组件，那么可以使用transition-group这个标签来处理
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
<link rel="stylesheet" href="./lib/animate.css">
<script src="./lib/vue.js"></script>
<script>
window.onload = function () {
Vue.component('yf-test', {
props: {
list: {
type: Array,
required: false,
default() {
return []
}
}
},
template: '<ul class="list-group"><transition-group enter-active-class="animated zoomInUp"><li class="list-group-item" v-for="(value,index) of list" :key="index"><slot :data="value"></slot></li></transition-group></ul>'
}); let VM = new Vue({
el: '#outdiv',
data: {
count: 1,
list: []
},
methods: {
add() {
this.list.push(this.count++);
}
}
})
}
</script>
</head>
<body>
<div class="container" id="outdiv">
<div class="jumbotron">
<div class="row">
<div class="col-md-6">
<yf-test :list="list">
<template slot-scope="props">
<div>{{props.data}}</div>
</template>
</yf-test>
</div>
<div class="col-md-6">
<yf-test :list="list">
<template slot-scope="props">
<b>{{props.data}}</b>
</template>
</yf-test>
</div>
</div>
</div>
<input type="button" value="增加" class="btn btn-primary" @click="add">
</div>
</body>
</html>
5、如果需要在vue项目是使用
import animated from 'animate.css' // npm install animate.css --save安装，在引入 Vue.use(animated)
vue 的动画的更多相关文章
- 从零开始学 Web 之 Vue.js（五）Vue的动画
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 049——VUE中使用animation与transform实现vue的动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue的动画组件（transition）
当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理: 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名. v-enter: 定 ...
- vue学习指南：第十篇(详细) - Vue的 动画
Vue 提供了一些不同的过度效果,主要根 v-if v-show 动态组件 1. Vue给动画分了6个过程,在css中,扮演6个类, 1. .v-enter定义动画的开始状态 2. .v-ente ...
- Vue.js动画在项目使用的两个示例
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 李萌,16年毕业,Web前端开发从业者,目前就职于腾讯,喜欢node.js.vue.js等技术,热爱新技术,热 ...
- [原]浅谈vue过渡动画,简单易懂
在vue中什么是动画 开始先啰嗦一下,动画的解释(自我理解
- Vue.js 动画
transition 动画: 当插入或删除包含在 transition 组件中的元素时,Vue将会做以下处理: 1.自动嗅探目标元素是否应用了css过滤或动画,如果是,在恰当的时机添加/删除c ...
- vue过渡动画
概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...
- router使用以及vue的动画效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
随机推荐
- mysql 无法链接, 输入密码失败
今天,在外面上网,使用的是公网(好像不安全,我也不懂),然后连接数据库,出现下面错误,我明明输入正确的密码还是失败了. 然后我在网上查方式, 应该是没有设置开机启动,输入了: mysqld --con ...
- 关于vue2.0 cnpm 镜像安装
前言:这几天安装vue环境一直报错,愁死我了,踩了好多坑,以前学的时候也安装成功了,后来很忙然后一直没顾上学vue,这么最近要学这个 在安装环境中平凡报错特此记笔记如下: 1.首先去下载node.js ...
- openstack Q版部署-----glance安装配置（4）
镜像服务(glance)使用户能够发现,注册和检索虚拟机镜像. 它提供了一个REST API,使您可以查询虚拟机镜像元数据并检索实际镜像. 您可以将通过镜像服务提供的虚拟机映像存储在各种位置,从简单的 ...
- WPF DataGrid中鼠标双击某一列，弹出窗体作为（增加、修改、详细）按钮的快捷键。
跟触发器行为有关,什么是触发器什么是行为,百度其他人写的乱七八糟的,我并不能看懂.在此先强行记忆,后知后觉,再回来理解. <i:Interaction.Triggers> <i:Ev ...
- SQL Server - NOLOCK
NOLOCK 一般用于此类语句中:select * from t with(NOLOCK)nolock是不加锁查询,可以读取被事务锁定的数据,也称为脏读.说明:使当前会话的查询,不受其它会话的事务所阻 ...
- VDB R&D
VDB Data value visualize: 结论从houdini得知. API常用文字: interior:内部 Narrow-band:窄带 background:窄带外 SDF: XY p ...
- GCC 编译优化指南【转】
转自:http://www.jinbuguo.com/linux/optimize_guide.html 版权声明 本文作者是一位开源理念的坚定支持者,所以本文虽然不是软件,但是遵照开源的精神发布. ...
- T-SQL ORDER BY子句 排序方式
MS SQL Server ORDER BY子句用于根据一个或多个列以升序或降序对数据进行排序. 默认情况下,一些数据库排序查询结果按升序排列. 语法 以下是ORDER BY子句的基本语法. SELE ...
- Golang 优化之路——bitset
写在前面 开发过程中会经常处理集合这种数据结构,简单点的处理方法都是使用内置的map实现.但是如果要应对大量数据,例如,存放大量电话号码,使用map占用内存大的问题就会凸显出来.内存占用高又会带来一些 ...
- FreeSWITCH黑名单功能设置
功能描述:对呼叫的号码进行过滤 步骤: 1.编译mod_blacklist 模块:进入源目录/usr/local/src/freeswitch --> make mod_blacklist-i ...