过渡(动画)
1. 简介
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果
本质上还是使用CSS3动画：transition、animation
2. 基本用法
使用transition组件，将要执行动画的元素包含在该组件内
<transition>
运动的元素
</transition>
过滤的CSS类名：6个
 
3. 钩子函数
8个
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

	<title>vue</title>

	<script src="https://unpkg.com/vue"></script>

	<style>

		p{

			width: 300px;

			height: 300px;

			background-color:red;

		}

		.fade-enter-active,.fade-leave-active{

			transition:all 3s ease;

		}

		.fade-enter-active{

			opacity:1;

			width:300px;

			height:300px;

		}

		.fade-leave-active{

			opacity:0;

			width:50px;

			height:50px;

		}

		/* .fade-enter需要放在.fade-enter-active的后面 */

		.fade-enter{

			opacity:0;

			width: 100px;

			height: 100px;

		}

	</style>

</head>

<body>

	<div id="itany">

		<button @click="flag=!flag">点我</button>

		<transition name="fade"

			@before-enter="beforeEnter"

			@enter="enter"

			@after-enter="afterEnter"

			@before-leave="beforeLeave"

			@leave="leave"

			@after-leave="afterLeave"

		>

			<p v-show="flag">网博</p>

		</transition>

	</div>

	<script>

		var vm=new Vue({

			el:'#itany',

			data:{

				flag:false

			},

			methods:{

				beforeEnter(el){

					// alert('动画进入之前');

				},

				enter(){

					// alert('动画进入');

				},

				afterEnter(el){

					// alert('动画进入之后');

					el.style.background='blue';

				},

				beforeLeave(){

					// alert('动画即将之前');

				},

				leave(){

					// alert('动画离开');

				},

				afterLeave(el){

					// alert('动画离开之后');

					el.style.background='red';

				}

			}

		});

	</script>

</body>

</html>

　　

4. 结合第三方动画库animate..css一起使用（https://daneden.github.io/animate.css/）
<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
　　<p v-show="flag">网博</p>
</transition>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

	<title>vue</title>

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

	<script src="https://unpkg.com/vue"></script>

	<script>

		window.onload = function(){

			var vm = new Vue({

				el:'#app',

				data:{

					flag:false

				}

			})

		}

	</script>

	<style>

		p{

			width: 300px;

			height: 300px;

			background-color: red;

			margin:0 auto;

		}

	</style>

</head>

<body>

    <div id="app">

		<button @click="flag=!flag">点我</button>

		<transition enter-active-class="animated rollIn" leave-active-class="animated rollOut">

			<p v-show="flag">网博</p>

		</transition>

    </div>

</body>

</html>

　　

 
5. 多元素动画
<transition-group>

　　

		<transition-group enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutLeft">

			<p v-show="flag" :key="1">你好</p>

			<p v-show="flag" :key="2">世界</p>

		</transition-group>

　　

　　

6. 练习
多元素动画
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

	<title>vue</title>

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

	<script src="https://unpkg.com/vue"></script>

	<script>

		window.onload = function(){

			var vm = new Vue({

				el:'#app',

				data:{

					flag:true,

					arr:['tom','jack','mike','alice','alex','mark'],

					name:''

				},

				/* 计算属性 */

				computed:{

					arr2:function(){

						var temp=[];

						this.arr.forEach(val => {

							if(val.includes(this.name)){

								temp.push(val);

							}

						});

						return temp;

					}

				}

			})

		}

	</script>

	<style>

		p{

			width: 50px;

			height: 50px;

			background-color: red;

			margin:0 auto;

		}

	</style>

</head>

<body>

    <div id="app">

		<input type="text" v-model="name">

		<transition-group enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">

				<p v-for="(v,k) in arr2" :key="k">

					{{v}}

				</p>

		</transition-group>

    </div>

</body>

</html>

　　

 
 
 

Vue（十四）过渡（动画）的更多相关文章

  1. VUE笔记 - 列表过渡动画 v-enter, v-leave-to | v-enter-active, v-leave-active | v-move

    本例要结合过渡动画四个过程的示意图一起理解. https://cn.vuejs.org/v2/guide/transitions.html 疑问: v-for="(item,i) in li ...

  2. Vue - 解决路由过渡动画抖动问题

    前言 Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置.路由参数等功能,让单页面应用变得更易于管理.良好的路由管理尤为重要,比如路由拦截.路由懒加载.路由权限等都在开发 ...

  3. 058_末晨曦Vue技术_过渡 & 动画之过渡的类名

    进入/离开 & 列表过渡 点击打开视频讲解更加详细 概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class ...

  4. vue.js之过渡动画

    vue提供了一个封装动画的组件 <transition name="tr"></transition>,将需要执行动画的元素包裹在该组件中,在通过css修改 ...

  5. Vue.js 之 过渡动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 066_末晨曦Vue技术_过渡 & 动画之多个元素的过渡

    多个元素的过渡 点击打开视频讲解更加详细 我们之后讨论多个组件的过渡,对于原生标签可以使用 v-if/v-else.最常见的多标签过渡是一个列表和描述这个列表为空消息的元素: <transiti ...

  7. android 学习随笔二十四（动画：帧动画）

    帧动画,一张张图片不断的切换,形成动画效果 * 在drawable目录下定义xml文件,子节点为animation-list,在这里定义要显示的图片和每张图片的显示时长 * FrameAnimatio ...

  8. Vue.js 第3章 axios&Vue过渡动画

    promise 它将我们从回调地狱中解脱出来 创建和使用 var fs = require('fs') // 创建promise // reslove表示执行成功后调用的回调函数 // reject表 ...

  9. Vue相关(过渡动画)

    Vue 过渡 && 动画 一.CSS过渡 1.transition标签可以用来封装需要过渡的元素,添加entering/leaving 过渡, 条件是: (1)使用条件渲染语句 v-i ...

随机推荐

  1. CentOS7中Docker-ce的卸载和安装

    一.查看是否已安装了Docker软件包: #查看是否已经安装的Docker软件包sudo yum list installed | grep docker 二.如果已安装不想要的docker/dock ...

  2. php7安装参数编译

    系统:Centos6.8 软件包:php-7.0.14.tar.gz yum install bzip2 bzip2-devel -y yum install curl curl-devel -y y ...

  3. python全栈开发day59-Django基础

    一.今日内容总结 1.HTTP协议: 请求:浏览器发给服务端的消息 格式: 请求方法 URL 协议版本\r\n k1: v1\r\n k2: v2\r\n \r\n 请求体(请求数据) 响应:服务端返 ...

  4. Zabbix监控Tomcat案例

    今天在这里,我们来聊一聊JMX监控方式, JMX(java管理扩展程序)是java平台上为应用程序,设备,系统等植入管理功能的框架,JMX可以跨越一系列不同的系统平台,更加灵活的服务管理应用: 在za ...

  5. Berlekamp-Massey算法简单介绍

    请阅读本文的同学们注意:之前这篇博客和所附代码有点问题,求的不一定是最短递推式,非常抱歉 看毛爷爷的论文大概断断续续看了一个月了,看得不是很懂,google了一波好像很快就看懂了,就先口胡一下这个算法 ...

  6. scheduler 基本原理

    Quartz 任务调度的核心元素是 scheduler, trigger 和 job,其中 trigger 和 job 是任务调度的元数据, scheduler 是实际执行调度的控制器. 1.sche ...

  7. ARM驱动：SEC S3C2410X Test B/D USB驱动 安装

    s3c2410x驱动是一款非常好用的usb驱动程序,win7 64位下mini2440 USB下载驱动安装,解决win7下安装SEC S3C2410X Test B/D 驱动出现叹号的问题.如果你开始 ...

  8. Nginx 关闭防火墙

    关闭防火墙 1) 重启后生效  开启: chkconfig iptables on  关闭: chkconfig iptables off    2) 即时生效,重启后失效  开启: service ...

  9. typescript精简版1：用ts表示常见数据类型

    一:工程准备: 1.全局安装typescript npm i typescript -g // 或 yarn global add typescript vscode 配置 在命令行执行 tsc -- ...

  10. XamarinAndroid组件教程RecylerView动画组件使用动画(3)

    XamarinAndroid组件教程RecylerView动画组件使用动画(3) (8)打开Main.axml文件,构建主界面.代码如下: <?xml version="1.0&quo ...