过渡(动画)
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. java keystore

    JAVA有一个keystore用来存放私钥和证书,该文件是伴随JDK默认存在的,路径默认是/lib/security/cacerts,默认密码是changeit,实际上空密码也可以直接访问 其中cac ...

  2. Asp.net MVC - 使用PRG模式(附源码)

    阅读目录: 一. 传统的Asp.net页面问题 二.Asp.net MVC中也存在同样的问题 三.使用PRG模式 四.PRG模式在MVC上的实现 一. 传统的Asp.net页面问题 一个传统的Asp. ...

  3. 【Android】TypedArray和obtainStyledAttributes使用

    在编写Android自定义按钮示例基础上,如果要指定字体大小产生这样的效果: 其实是不需要自定义变量的,可以直接使用TextView的配置属性: <com.easymorse.textbutto ...

  4. ubuntu系统查看已安装的软件

    1.查看安装的所有软件 dpkg -l 例如:dpkg -l | grep ftp 2.查看软件安装的路径 dpkg -L | grep ftp 也可以用 whereis ftp 3.查看软件版本 a ...

  5. ansible 自动化管理

    1 什么样的情形需要批量部署 1.操作系统的安装 常见的有collber,red hat satelite(redhat)系统专用. 2.操作系统的配置 常见的有cfengine,puppet,che ...

  6. 分解数据表(将一个datatable按数据量分隔成多个table)

    /// <summary> /// 分解数据表 /// </summary> /// <param name="originalTab">需要分 ...

  7. Redis数据库 01概述| 五大数据类型

    1.NoSQL数据库简介 解决应用服务器的CPU和内存压力:解决数据库服务的IO压力: ----->>> ① session存在缓存数据库(完全在内存里),速度快且数据结构简单: 打 ...

  8. tp5的路由

    路由模式:普通.强制和混合 普通模式: //配置文件关闭路由,完全使用默认的PATH_INFO方式URL 'url_route_on' => false, 关闭路由后的普通模式任然可以通过操作方 ...

  9. HDU 1522 Marriage is Stable 【稳定婚姻匹配】(模板题)

    <题目链接> 题目大意: 给你N个男生和N个女生,并且给出所有男生和女生对其它所有异性的喜欢程度,喜欢程度越高的两个异性越容易配对,现在求出它们之间的稳定匹配. 解题分析: 稳定婚姻问题的 ...

  10. Qt创建任务栏进度条

    一.正文 任务栏进度条是Windows7就引入的一种UI形式,通常用于显示软件当前正在执行的任务的进度(如编译程序的进度.下载任务的进度).如下: 在Qt中使用任务栏进度条也是非常容易的一件事情.Qt ...