Vue相关(过渡动画)
Vue 过渡 && 动画
一、CSS过渡
1.transition标签可以用来封装需要过渡的元素,添加entering/leaving 过渡,
条件是:
(1)使用条件渲染语句 v-if/v-show
(2)动态组件
(3)组件根节点
通过style标签设置过渡动画时需要为transition指定name属性,当指定了name属性之后,
vue会自动去找几个过渡动画需要的类
active类中一般放过渡属性,例如transition,animation等,放animation需要指定动画关键帧
(v-是这些类名的前缀,会被替换为transition中name属性)
v-enter-active(进入中,过渡状态)
v-enter(进入之前,开始过渡状态)
v-enter-to(进入结束,开始过渡的结束状态) 一般不用
v-leave-active(离开中,过渡状态)
v-leave(离开前,离开过渡状态)
v-leave-to(离开结束,离开过渡的结束状态) 一般不用
二、CSS动画
1.CSS动画同CSS过渡,也需要四个类,active类中放的是animation,需要指定关键帧,关键帧使用transform定义动画状态,当设置了transition的name属性之后,vue会自动去探测是否存在这几个类,如果有,就执行了类中的动画
2.自定义动画,通常用于和第三方动画库相结合
<transition
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
为transition标签设置以下几个属性来指定动画需要的类,这几个类的优先级高于普通类,与第三方动画库相结合时十分有用
(1)enter-active-class
(2)enter-class
(3)enter-to-class
(4)leave-active-class
(5)leave-class
(6)leave-to-class
三、使用钩子函数设置动画
可以通过在transition标签中绑定钩子函数来设置过渡动画,几个钩子函数如下:
钩子函数 | 对应的参数 |
---|---|
before-enter | (el) |
enter | (el,done) |
after-enter | (el) |
enter-cancelled | (el) |
before-leave | (el) |
leave | (el,done) |
after-leave | (el) |
leave-cancelled | (el) |
通常在before-enter或before-leave中指定状态,在enter或leave函数中执行动画
beforeEnter: function (el) {
// 进入之前
$(el).css({
opacity: 0,
color: 'red',
});
},
enter: function (el, done) {
// 第一种
$(el).animate({
opacity:1,
},3000,function(){
//需要在动画执行完毕的回调函数中调用done
done();
})
// 第二种
$(el).fadeIn(1000,()=>{
done();
})
// 第三种 引入velocity动画库
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
Velocity(el, {opacity: 1, translateX: '20px', fontSize: '2em'}, {duration: 300});
Velocity(el, {translateX: '0px', fontSize: '1em'}, {complete: done})
},
当只用 JavaScript 过渡的时候, 在 enter 和 leave 中,回调函数 done 是必须的 。 否则,它们会被同步调用,过渡会立即完成。
四、初始渲染的过渡
通过为transition标签添加appear属性设置节点在初始渲染时的过渡效果
同样可以定义自定义类名
appear-class
appear-to-class
appear-active-class通过可以定义JavaScript中的钩子函数
before-appear
appear
after-appear
appear-cancelled为transiton设置appear属性,如果没有对应的过渡类或者钩子函数会默认去执行before-enter,和enter钩子函数的内容
五、多元素的过渡
注意相同标签切换需要设置key属性:
当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们,否则 Vue 为了效率只会替换相同标签内部的内容
transition标签内部最外部根节点只能有一个,但通过v-if,v-else-if,v-else设置切换时候可以有多个跟标签
六、过渡模式
为transition标签设置mode属性
(1)in-out:新元素先进行过渡,完成之后当前元素过渡离开
(2)out-in:当前元素先进行过渡,完成之后新元素过渡进入
七、多组件过渡
使用v-bind:is属性为保留组件component来指定要渲染成哪个组件
<transition name="component-fade" mode="out-in">
<component v-bind:is="view"></component>
</transition>
八、列表过渡
使用tranistio-group标签来为多个节点设置过渡
tranistio-group标签默认渲染成span标签,可通过为其设置tag="div"属性将其渲染成div
tranistio-group内部元素总是需要 提供唯一的 key 属性值
九、列表位移过渡
transition-group标签添加v-move属性定义元素位置改变时使用的动画,同进入和离开动画一样,v会被替换成transition-group便签的name属性,也可以通过move-class自定义类来设置自定义位移时使用的类
当要设置离开时的位移过渡时需要设置绝对定位position:absolute
<!--filp-list为transition-group便签的name属性-->
.flip-list-move {
transition: transform 1s;
}
十、Lazy sudoku
通过tranistion-group标签设置随机数独元素的切换,注意transition-group内的每个元素的v-bind:key需要绑定的和元素相关,不然只是简单的数字替换,非元素的移动
CSS:
* {
box-sizing: border-box;
}
.box {
display: block;
margin: 0 auto;
width: 450px;
height: 450px;
}
.item {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
border: 1px solid #eee;
text-align: center;
color: #666;
}
.fade-move {
transition: all 0.4s linear;
}
HTML:
<div id="app">
<transition-group name="fade" class="box">
<span v-for="item in numArr" :key="item.id" class="item" :style="item.bg">{{ item.num }}</span>
</transition-group>
</div>
JavaScript
var app = new Vue({
el: '#app',
data: {
numArr: new Array(81).fill(1).map((value, index) => {
return {
num: (index % 9),
id: index,
bg:{
backgroundColor:'hsl(' + Math.floor(Math.random() * 360) + ',70% ,80%)'
}
}
}),
},
methods: {
shuffle: function () {
this.numArr.sort(function () {
return Math.random() - 0.5;
});
}
},
created: function () {
this.shuffle();
}
});
十一、可复用的过渡
将transition或者transition-group标签作为组件的根标签即可实现可复用的过渡
Vue相关(过渡动画)的更多相关文章
- VUE:过渡&动画
VUE:过渡&动画 vue动画的理解 1)操作css的 trasition 或 animation 2)vue会给目标元素添加/移除特定的class 3)过渡的相关类名 xxx-enter-a ...
- vue的过渡动画在除了chrome浏览器外的浏览器下不正常的问题
为过渡动画添加mode="out-in"在其它浏览器下面就能正常的使用了
- vue.js 过渡&动画
9-17 在add ,update, remove DOM时 提供多种方式的应用过度效果. 包括以下可选工具:(2大类,css和js) 在css过度和动画中自动应用class 配合使用第三方css动画 ...
- Vue过渡动画—Vue学习笔记
要求:要通过Vue使用过渡动画我们要把需要过度的元素放在<transition name='变量名'></transition>中. 原理:通过在特定的时刻增加/移除样式实现. ...
- Vue过渡动画运用transition
vue的过渡动画,主要是transition标签的使用,配合css动画实现的.官方文档css过渡 通过点击事件来切换show的值来改变显示的文本,下面的css通过进入离开时的在匀速状态下xxs(秒)下 ...
- Vue使用过渡类名实现动画和自定义前缀
Vue使用过渡类名实现动画和自定义前缀 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> ...
- Vue.js 第3章 axios&Vue过渡动画
promise 它将我们从回调地狱中解脱出来 创建和使用 var fs = require('fs') // 创建promise // reslove表示执行成功后调用的回调函数 // reject表 ...
- (学习心路历程)Vue过渡/动画 VS. 过渡/动画
[此篇为本人的个人见解和哔哔赖赖,如果有观点不对的地方,还请大家指出来哇!!] 最近实习在做一个项目,里面应用的动画效果还蛮复杂的,因为本身对Vue框架比较熟悉,所以最终选择了Vue框架. 自己之前从 ...
- vue过渡动画
概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...
随机推荐
- 【MYSQL】解决Mysql直接登录问题(删除匿名用户)(转)
刚安装的Mysql会存在匿名用户. 在命令行下输入mysql,(如果这时提示不是外部或内部指令,那就把mysql server文件下的bin目录添加到系统路径Path中) 如果没有任何提示,直接进入& ...
- Java单线程文件下载,支持断点续传功能
前言: 程序下载文件时,有时会因为各种各样的原因下载中断,对于小文件来说影响不大,可以快速重新下载,但是下载大文件时,就会耗费很长时间,所以断点续传功能对于大文件很有必要. 文件下载的断点续传: 1. ...
- wampserver集成包的配置
1.修改www/index.php 修改如下: $projectContents .= '<li><a href="'; ...
- Java curator操作zookeeper获取kafka
Java curator操作zookeeper获取kafka Curator是Netflix公司开源的一个Zookeeper客户端,与Zookeeper提供的原生客户端相比,Curator的抽象层次更 ...
- JAVA二维数组的复制
JAVA二维数组的复制 笔者今天做一道ccf题目时,遇到要将二维数组拷贝复制时,没有用常规的那种一个一个数的复制,用的是System.arraycopy()来进行复制,下面介绍这个函数的一些注意点: ...
- NodeJS学习目录
前面的话 几年前,对于学习NodeJS可能还有所迟疑,怕分散了前端学习的精力.但到了现在,如果不学习nodeJS,前端的学习却可能无法再有所进展.技术的进步就是这么残酷.对新技术观望的时候,该技术已经 ...
- [基础]PeopleSoft中的作业和调度作业集合定义
PeopleSoft进程调度器可以使一个或多个进程作为一个组.这个组在PeopleSoft中被称为作业(Job). PeopleSoft进程被定义为单个任务,程序或例程,例如cobol程序或AE程序或 ...
- 常用类:String,StringBuffer,StringBuilder
String String类被final修饰符修饰,所以不能将其进行继承,所有对它的改变都要重新创建一个新的地址 1.String的构造器 String() String(byte []bytes)/ ...
- .NET Core资源汇总
前言 首先庆祝.NET Core 2.0今天发布. 最近一两年.NET的关注度直线下降, 大部分开发人员转去了其他平台, 国内的机会也越来越少了. 行情虽然如此, 仍在坚守.NET平台的开发人员还是要 ...
- C++ Socket学习记录 -1
1.IP的转换 1)正转换 结构 sockaddr_in 在C++ 中表明一个IP地址结构,包含地址家,端口以及IP地址等信息 如: sockaddr_in addr; addr.sin_family ...