Vue动画操作
概述
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
- Vue 提供了
transition
- 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡。
过渡的类名
在进入/离开的过渡中，会有 6 个 class 切换。
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter被移除)，在过渡/动画完成之后移除。v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave被删除)，在过渡/动画完成之后移除。
<!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>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body> <style> /* 使用Vue过度类来实现动画，只需要添加下面的类就行了 */
/* 动画在进入前和离开后的状态 */
.v-enter,.v-leave-to{
opacity: 0;
transform: translate(100px,0);
} /* 表示动画在执行的时候的状态 */
.v-enter-active,.v-leave-active{
transition: all 1s ease;
} /* 如果我想给h1 添加不同的动画呢 需要更改transition的name 属性 */ .china-enter,.china-leave-to{
opacity: 0;
transform: translate(0,150px);
transition: all .4s ease; }
.china-enter-active,.china-leave-active{
transition: all 1s ease-in-out;
}
</style> <div class="container">
<input type="button" value="动画" @click="animationClick">
<transition>
<h3 id="cc" v-show="flog">中国70岁生日快乐</h3>
</transition>
<input type="button" value="动画2" v-on:click="animationClick2">
<transition name="china">
<h1 v-show="flog2">祖国生日快乐</h1>
</transition> </div> <script>
var vm=new Vue({
el:'.container',
data:{
flog:false,
flog2:false
},
methods: {
animationClick:function(){
this.flog=!this.flog
},
animationClick2(){
this.flog2=!this.flog2
} } });
</script> </body>
</html>
使用第三方Animate类库 来实施Vue动画
<!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>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="./lib/Animate.css">
</head>
<body> <div class="container">
<input type="button" value="动画" @click="animationClick">
<!-- 使用第三方 Animate.css类库 注意：
1. 需要在transition 元素中 添加 enter-active-class 和leave-active-calss 类名
2.在enter-active-class和leave-active-class中 必须要写上 animated 之后在跟上动画的类名
3.:duration 持续时间 是绑定属性v-bind -->
<transition enter-active-class="animated hinge" leave-active-class="animated bounceOutRight" :duration="10">
<h3 id="cc" v-show="flog">中国70岁生日快乐</h3>
</transition> </div> <script>
var vm=new Vue({
el:'.container',
data:{
flog:false,
},
methods: {
animationClick:function(){
this.flog=!this.flog
},
animationClick2(){
this.flog2=!this.flog2
} } });
</script> </body>
</html>
显性的过渡持续时间
2.2.0 新增
在很多情况下，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。
在这种情况下你可以用 <transition> 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：
<transition :duration="1000">...</transition> |
你也可以定制进入和移出的持续时间：
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
|
使用js钩子函数（也就是动画的生命周期函数）
语法：可以在属性中声明 JavaScript 钩子
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
// ...
methods: {
// --------
// 进入中
// -------- beforeEnter: function (el) {
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
}, // --------
// 离开时
// -------- beforeLeave: function (el) {
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
下面是操作实例
<!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>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
.ball {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: red;
}
</style>
</head> <body>
<div id="app">
<input type="button" value="快到碗里来" @click="flag=!flag">
<!-- 1. 使用 transition 元素把 小球包裹起来 -->
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
</div> <script> // 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {
// 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象
// 大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
beforeEnter(el){
// beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式
// 设置小球开始动画之前的，起始位置
el.style.transform = "translate(0, 0)"
},
enter(el, done){
// 这句话，没有实际的作用，但是，如果不写，出不来动画效果；
// 可以认为 el.offsetWidth 会强制动画刷新
el.offsetWidth
// enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
el.style.transform = "translate(150px, 450px)"
el.style.transition = 'all 1s ease' // 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
done()
},
afterEnter(el){
// 动画完成之后，会调用 afterEnter
// console.log('ok')
this.flag = !this.flag
}
}
});
</script>
</body> </html>
Vue动画操作的更多相关文章
- 动画操作 (Applying Animations) ngAnimate12
动画操作 (Applying Animations) ngAnimate step 12 1.切换目录 git checkout step-12 npm start 2.效果图 这里在点击右边的缩略图 ...
- vue动画的用法
vue动画 在vue.js中有两种写动画的方法,第一种就是像js里一样,用原生代码来实现,第二种则是使用animate.css的动画类文件,这个动画类和bootstrap.css文件类似,直接调用类就 ...
- jQuery的一些基本的函数和用jQuery做一些动画操作
jQuery是对js的封装,因为js有一些不方便的地方.所以,jQuery才会去对js进行封装. jQuery对于标签元素的获取 $('div')或$('li') <!DOCTYPE html& ...
- vue动画及其原理
1,vue动画的实现原理,主要是通过在不同时期给需要动画的dom元素加上css动画样式 我们以显示和隐藏动画为例 a, 需要动画的dom元素 b,点击时vue控制往vue中加的样式 2, 我们以两张 ...
- Canvas组件：画布，可以实现动画操作。
Module 10 Canvas组件:画布,可以实现动画操作. TextArea:文本域. 在单行文本域中回车会激发ActionEvent. 用CheckBoxGroup实现单选框功能. Java中 ...
- vue教程3-02 vue动画
vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...
- Canvas组件：画布，可以实现动画操作
Canvas组件:画布,可以实现动画操作. TextArea:文本域. 在单行文本域中回车会激发ActionEvent. 用CheckBoxGroup实现单选框功能. Java中,单选框和复选框都是使 ...
- vue样式操作与事件绑定
Vue笔记 1 Vue实例 (VM) var vm = new Vue({ el:'#app', //挂载元素 //数据 data: { title:'值', ...
- vue动画实现方式
vue动画实现方式 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...
随机推荐
- getField和getDeclaredField的区别
这两个方法都是用于获取字段getField 只能获取public的,包括从父类继承来的字段.getDeclaredField 可以获取本类所有的字段,包括private的,但是不能获取继承来的字段. ...
- 报错：Configured broker.id 68 doesn't match stored broker.id 113 in meta.properties
报错背景: CDH中安装完成kafka的组件后不能成功启动,发现UI界面中的broker.id和服务器中的broker.id不一致, 因此更改了服务器中broker.id 但是更改完成之后还是报错. ...
- IBM System x3650 M3_RAID服务器进入阵列卡配置界面(webBIOS)
按 F1 进入 UEFI, 选择“System Settings”- “Adapters and UEFI Drivers”- “Please press ENTER to compile the l ...
- c# .net 查找并安装CA根证书
https CA根证书 用的是证书指纹来查找. 在用 collection.Find 之前 ,X509Store 一定要打开(Open),否则找到的数量(X509Certificate2Collect ...
- Redis与memached的区别
Redis与Memcached的区别 传统MySQL+ Memcached架构遇到的问题 实际MySQL是适合进行海量数据存储的,通过Memcached将热点数据加载到cache,加速访问,很多公司都 ...
- jira7.3.6 windows7下安装、中文及破解
一.事前准备 1:JDK下载并安装:jdk-6u45-windows-i586.exe 2:MySQL JDBC连接驱动:mysql-connector-java-5.1.25.zip 3:MySQL ...
- 030 Android 第三方开源下拉框：NiceSpinner的使用+自定义Button样式+shape绘制控件背景图+图片选择器(selector)
1.NiceSpinner下拉框控件介绍 Android原生的下拉框Spinner基本上可以满足Android开发对于下拉选项的设计需求,但现在越来越流行的下拉框不满足于Android原生提供的下拉框 ...
- [C#] - 从 HTML 代码中 转换 / 提取 可读文字（PlainText）的方法
背景 在做网页数据分析的时候,我们关注的部分是内容,可以过滤掉HTML标签.Javascript.CSS等代码. 目标输入 <b>Hello World.</b><br/ ...
- idea 默认全局配置maven，避免每次新建项目都需要指定自己的maven目录
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_28624243/article/details/84199937 File->Oth ...
- ORA-01618 ORA-19809: limit exceeded for recovery files
由于DB_RECOVERY_FILE_DEST_SIZE 参数设置太小,导致redo只能创建一组,无法创建节点二的日志组,节点二数据库无法启动,如下图: 修改参数后,节点二无法启动到mount模式,无 ...