Vue_(组件)过渡效果
Vue.js进入/离开 & 列表过渡 传送门
进入/离开过渡效果：Vue在插入、更新或移除DOM时，可以设置一些动画效果；
过渡效果中也提供了对应的钩子函数，这些钩子函数需要在<transition>组件上绑定，然后再实现
Vue中的过渡效果也可以与其他第三方CSS动画库一起使用，例如Animate.css
如果是对多个元素过渡，例如列表，这时就要用到<transition-group>这个组件了
Learn
一、进入/离开过渡效果
二、过渡效果的钩子函数
三、Vue过渡效果+Animate.css[Animate.css 传送门]
四、列表过渡
目录结构
【每个demo下方都存有html源码】
一、进入/离开过渡效果 传送门
进入/离开过渡效果：Vue在插入、更新或移除DOM时，可以设置一些动画效果
如何使用过渡效果：利用<transition></transition>组件将需要应用的过渡效果的DOM对象包裹住，然后书写对应的样式
过渡的类名：过渡效果的样式是类样式，在进入/离开的过渡中有6个类样式的切换，分别是
v-enter：定义进入过渡的开始状态；
v-enter-active：定义进入过渡生效状态，在这里可以定义进入过渡的时间、延迟、曲线函数等；
v-enter-to：定义进入过渡结束状态；
v-leave：定义离开过渡的开始状态；
v-leave-active：定义离开过渡生效状态，在这里可以定义离开过渡的时间、延迟、曲线函数等；
v-leave-to：定义离开过渡结束状态；
通过Button给来控制动画的进入和离开，初始值设置flag为false
<div id="GaryId">
<button @click="flag = !flag">显示/隐藏</button><br />
<!--需要添加css的div使用transition标签-->
<transition name='fade'>
<div v-show='flag' class="mybtn"></div>
</transition>
</div>
<style type="text/css">
.mybtn{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: red;
/*div从左到右移动位移*/
transform: translateX(20px);
}
.fade-enter-active, .fade-leave-active{
/*进入和离开时时间为2s*/
transition: all 2s;
}
.fade-enter{
/*设置透明度为0*/
opacity:;
transform: translateX(0px);
}
.fade-enter-to{
opacity:;
transform: translateX(20px);
}
.fade-leave{
opacity:;
}
.fade-leave-to{
opacity:;
transform: translateX(0px);
} </style>
style
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
<script type="text/javascript" src="../js/vue.js"></script> </head>
<body>
<div id="GaryId">
<button @click="flag = !flag">显示/隐藏</button><br />
<!--需要添加css的div使用transition标签-->
<transition name='fade'>
<div v-show='flag' class="mybtn"></div>
</transition>
</div>
</body> <style type="text/css">
.mybtn{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: red;
/*div从左到右移动位移*/
transform: translateX(20px);
}
.fade-enter-active, .fade-leave-active{
/*进入和离开时时间为2s*/
transition: all 2s;
}
.fade-enter{
/*设置透明度为0*/
opacity: 0;
transform: translateX(0px);
}
.fade-enter-to{
opacity: 1;
transform: translateX(20px);
}
.fade-leave{
opacity: 1;
}
.fade-leave-to{
opacity: 0;
transform: translateX(0px);
} </style> <script> let vm = new Vue({
data:{
flag:false
}
}).$mount('#GaryId'); </script> </html>
Gary_Transition.html
二、过渡效果的钩子函数 传送门
过渡效果中也提供了对应的钩子函数，这些钩子函数需要在<transition>组件上绑定，然后再实现
过渡效果的钩子函数有：
@before-enter=“beforeEnter“ ：进入过渡运行前
@enter=“enter“：进入过渡运行时
@after-enter=“afterEnter“：进入过渡运行后
@enter-cancelled=“enterCancelled“：进入过渡被打断时
@before-leave=“beforeLeave“：离开过渡运行前
@leave=“leave“：离开过渡运行时
@after-leave=“afterLeave“：离开过渡运行后
@leave-cancelled=“leaveCancelled“：离开过渡被打断时
<body>中添加过渡效果的钩子函数，transition中钩子函数的名称不可以修改，方法可以修改【尽量和文档中名字一样】
<div id="GaryId">
<button @click="flag = !flag">显示/隐藏</button><br />
<transition name='fade'
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled" @before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
>
<div v-show='flag' class="mybtn"></div>
</transition>
</div>
第一次演示进入过渡状态开始前、进入过渡状态开始、进入过渡状态结束、离开过渡状态开始前、离开过渡状态开始、离开过渡状态结束周期
第二次演示进入过渡状态开始前、进入过渡状态开始、进入过渡状态被打断、离开过渡状态开始前、离开过渡状态开始、离开过渡状态结束周期
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
<script type="text/javascript" src="../js/vue.js"></script> </head>
<body>
<div id="GaryId">
<button @click="flag = !flag">显示/隐藏</button><br />
<transition name='fade'
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled" @before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
>
<div v-show='flag' class="mybtn"></div>
</transition>
</div> </body> <style type="text/css">
.mybtn{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: red;
/*div从左到右移动位移*/
transform: translateX(20px);
}
.fade-enter-active, .fade-leave-active{
/*进入和离开时时间为2s*/
transition: all 2s;
}
.fade-enter{
/*设置透明度为0*/
opacity: 0;
transform: translateX(0px);
}
.fade-enter-to{
opacity: 1;
transform: translateX(20px);
}
.fade-leave{
opacity: 1;
}
.fade-leave-to{
opacity: 0;
transform: translateX(0px);
} </style> <script> let vm = new Vue({
data:{
flag:false
},
methods:{
beforeEnter(){
alert("beforeEnter 进入过渡状态 开始 前");
},
enter(){
alert("enter 进入过渡状态 开始");
},
afterEnter(){
alert("afterEnter 进入过渡状态 结束");
},
enterCancelled(){
alert("enterCancelled 进入过渡状态 被打断");
},
beforeLeave(){
alert("beforeLeave 离开过渡状态 开始 前");
},
leave(){
alert("leave 离开过渡状态 开始");
},
afterLeave(){
alert("afterLeave 离开过渡状态 结束");
},
leaveCancelled(){
alert("leaveCancelled 离开过渡状态 被打断");
}
}
}).$mount('#GaryId'); </script> </html>
Gary_Transition-02.html
当需要给钩子函数传参贴一个例子
enter(el){
alert("enter 进入过渡状态 开始");
// 添加延时
setTimeout(()=>{
el.style.backgroundColor = 'green';
},400);
}
三、Vue过渡效果+Animate.css 传送门
Vue中的过渡效果也可以与其他第三方CSS动画库一起使用，例如Animate.css；
使用第三方动画库我们需要用到自定义过渡类名：
enter-class；
enter-active-class；
enter-to-class；
leave-class；
leave-active-class；
leave-to-class；
<body>
<div id="GaryId">
<button @click="flag = !flag">显示/隐藏</button><br />
<transition name='fade'
enter-to-class='animated zoomInDown'
leave-to-class='animated zoomOutUp'
>
<div v-show='flag' class="mybtn"></div>
</transition>
</div>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
<script type="text/javascript" src="../js/vue.js"></script>
<link rel="stylesheet" type="text/css" href="../css/animate.css"/>
</head>
<body>
<div id="GaryId">
<button @click="flag = !flag">显示/隐藏</button><br />
<transition name='fade'
enter-to-class='animated zoomInDown'
leave-to-class='animated zoomOutUp'
>
<div v-show='flag' class="mybtn"></div>
</transition>
</div>
</body> <style type="text/css">
.mybtn{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: red;
/*div从左到右移动位移*/
transform: translateX(20px);
}
.fade-enter-active, .fade-leave-active{
/*进入和离开时时间为2s*/
transition: all 2s;
}
.fade-enter{
/*设置透明度为0*/
opacity: 0;
transform: translateX(0px);
}
.fade-enter-to{
opacity: 1;
transform: translateX(20px);
}
.fade-leave{
opacity: 1;
}
.fade-leave-to{
opacity: 0;
transform: translateX(0px);
} </style> <script> let vm = new Vue({
data:{
flag:false
},
methods:{
beforeEnter(){
alert("beforeEnter 进入过渡状态 开始 前");
},
enter(el){
alert("enter 进入过渡状态 开始");
// 添加延时
setTimeout(()=>{
el.style.backgroundColor = 'green';
},400);
},
afterEnter(){
alert("afterEnter 进入过渡状态 结束");
},
enterCancelled(){
alert("enterCancelled 进入过渡状态 被打断");
},
beforeLeave(){
alert("beforeLeave 离开过渡状态 开始 前");
},
leave(el){
alert("leave 离开过渡状态 开始");
el.style.backgroundColor = 'red';
},
afterLeave(){
alert("afterLeave 离开过渡状态 结束");
},
leaveCancelled(){
alert("leaveCancelled 离开过渡状态 被打断");
}
}
}).$mount('#GaryId'); </script> </html>
Gary_Transition-03.html
四、列表过渡 传送门
之前我们一直在操作单个元素的过渡，如果是对多个元素过渡，例如列表，这时就要用到<transition-group>这个组件了；
如何使用：将要操作的列表元素放在<transition-group></transition-group>内，其他与<transition>基本一致；
注意：在<transition-group>的元素要指定个唯一的 :key 属性
当绑定的key属性相同时编译器会报错！！
<div id="GaryId">
<button @click="flag=!flag">显示/隐藏</button><br />
<transition-group name='fade' tag='ul'>
<div v-show='flag' class="mybtn" :key='a'></div>
<div v-show='flag' class="mybtn" :key='b'></div>
</transition-group>
</div>
let vm = new Vue({
data : {
flag : false,
a : '1',
b : '2'
},
methods : {
}
}).$mount('#GaryId');
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
<script type="text/javascript" src="../js/vue.js"></script> </head>
<body>
<div id="GaryId">
<button @click="flag=!flag">显示/隐藏</button><br />
<transition-group name='fade' tag='ul'>
<div v-show='flag' class="mybtn" :key='a'></div>
<div v-show='flag' class="mybtn" :key='b'></div>
</transition-group>
</div>
</body> <style type="text/css">
.mybtn{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: red;
/*div从左到右移动位移*/
transform: translateX(20px);
}
.fade-enter-active, .fade-leave-active{
/*进入和离开时时间为2s*/
transition: all 2s;
}
.fade-enter{
/*设置透明度为0*/
opacity: 0;
transform: translateX(0px);
}
.fade-enter-to{
opacity: 1;
transform: translateX(20px);
}
.fade-leave{
opacity: 1;
}
.fade-leave-to{
opacity: 0;
transform: translateX(0px);
} </style> <script> let vm = new Vue({
data : {
flag : false,
a : '1',
b : '1'
},
methods : { }
}).$mount('#GaryId'); </script> </html>
Gary_Transition-04.html
附贴上一个小案例【不需要添加animate.css】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
<script type="text/javascript" src="../js/vue.js"></script> </head>
<body>
<div id="GaryId">
<button @click="addNum">添加数字</button><br />
<transition-group name='fade' tag='ul'>
<li v-for='(item,index) in numArray' :key='item'>
{{item}}
<button @click='removeNum(index)'> - </button>
</li>
</transition-group>
</div>
</body> <style type="text/css">
.mybtn{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: red;
/*div从左到右移动位移*/
transform: translateX(20px);
}
.fade-enter-active, .fade-leave-active{
/*进入和离开时时间为2s*/
transition: all 2s;
}
.fade-enter{
/*设置透明度为0*/
opacity: 0;
transform: translateX(0px);
}
.fade-enter-to{
opacity: 1;
transform: translateX(20px);
}
.fade-leave{
opacity: 1;
}
.fade-leave-to{
opacity: 0;
transform: translateX(0px);
} </style> <script> let vm = new Vue({
data : {
flag : false,
a : '1',
b : '1',
numArray : [1, 2, 3, 4, 5]
},
methods : {
addNum(){
let num = Math.ceil(Math.random() * 100);
this.numArray.push(num);
},
removeNum(index){
this.numArray.splice(index, 1);
}
}
}).$mount('#GaryId'); </script> </html>
Gary_Transition-04.html
Vue_(组件)过渡效果的更多相关文章
- vue_组件间通信：自定义事件、消息发布与订阅、槽
自定义事件 只能用于 子组件 向 父组件 发送数据 可以取代函数类型的 props 在父组件: 给子组件@add-todo-event="addTodo" 在子组件: 相关方法中, ...
- Vue_(组件通讯)使用solt分发内容
Vue特殊特性slot 传送门 有时候我们需要在自定义组件内书写一些内容,例如: <com-a> <h1>title</h1> </com-a> 如果想 ...
- Vue_(组件通讯)非父子关系组件通信
Vue单项数据流 传送门 Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信 ...
- Vue_(组件通讯)单项数据流
Vue单项数据流 传送门 单向数据流:父组件值的更新,会影响到子组件,反之则不行 修改子组件的值: 局部数据:在子组件中定义新的数据,将父组件传过来的值赋值给新定义的数据,之后操作这个新数据 如果对数 ...
- Vue_(组件通讯)子组件向父组件传值
Vue组件 传送门 子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: ...
- Vue_(组件通讯)父组件向子组件传值
Vue组件 传送门 父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件 2.准备获取数据:c ...
- Vue_(组件通讯)父子组件简单关系
Vue组件 传送门 在Vue的组件内也可以定义组件,这种关系成为父子组件的关系 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的 ...
- Vue_(组件通讯)动态组件结合keep-alive
keep-alive 传送门 <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive ...
- Vue_(组件通讯)动态组件
动态组件 传送门 在一个元素上挂载多个组件,根据不同状态进行切换的时候,可以使用动态组件 动态组件的使用:需要使用内置组件<component></component>,根据 ...
随机推荐
- Lua的API函数
1. 基础库 我们在整个教程中使用了各种主题下的基本库. 下表提供了相关页面的链接,并列出了本Lua教程各部分所涵盖的功能. 编号 库/方法 作用 1 错误处理 包括错误处理函数,如断言, 错误,如L ...
- 一次简单的springboot+dubbo+flume+kafka+storm+redis系统
最近无事学习一下,用springboot+dubbo+flume+kafka+storm+redis做了一个简单的scenic系统 scenicweb:展现层,springboot+dubbo sce ...
- Winform_chart控件_心得
效果图: 1.首先,在工具箱找到chart控件,拖到窗体中. 2.关于chart控件的细节设计: series集合设计: chartType可以选择折线图.柱状图.圆饼图等等. isValueShow ...
- vue之scoped穿透
vue之scoped穿透 问题:在页面中,需要了第三方插件的样式,又不想取消scoped,防止造成样式污染 方法:>>> 代码: #tab >>> .ivu-tab ...
- 1 SQL SERVER 实现字符串分割成table的方法
CREATE FUNCTION [dbo].[fn_SplitStringToTable] ( @p_Input VARCHAR(MAX), @p_Delimeter CHAR() = ',' ) R ...
- latex中文环境配置（针对北大模板，开题报告+中期答辩+毕业论文）
最近自己在忙着开题,中文环境真的是emm 以下只针对北大的毕业论文模板,至于其他的中文环境没有尝试 主要是用不同的latex编辑器会报不同的错误,当然我最后还是统一成了pdflatex,经过无数次尝试 ...
- 使用HandyJSON导致的内存泄漏问题相关解决方法
在移动开发中,与服务器打交道是不可避免的,从服务器拿到的接口数据最终都会被我们解析成模型,现在比较常见的数据传输格式是json格式,对json格式的解析可以使用原生的解析方式,也可以使用第三方的,我们 ...
- Html5+Css3小试牛刀
前因: 我开始做个收款系统,突然客户跑来要插进一个任务,据说他们老板挺在意的,一个小商场,一个首页,一个详情页,UI无自由发挥,要求,尽量好看点. 一番交谈后,确认这是一个对外的网站,最好移动端也能正 ...
- Oracle【增删改&数据的备份】
增删改的SQL语句执行完毕后,不会立马进行数据的写入数据库(这时数据在内存中),需要手动对数据进行提交(commit),如果数据出问题,可以使用回滚.主键:非空唯一的 --在一张表中,某字段值是非空唯 ...
- 解决docker容器的窗口大小问题
解决docker容器的窗口大小问题 最近哥们在是使用docker时,发现有些容器内部窗口大小有问题. 如下午所示,vi窗口只占据左上角一部分.正常情况下vi应该铺满整个窗口才对呀. 所以哥们找到了解决 ...