什么是vue过渡：
- 元素在显示和隐藏时，不会直接显示和隐藏，而是会有一个过渡或动画效果。
- 过渡能够提升用户的体验。
- 我们可以通过控制类名或样式的方式，自己去实现元素或组件的过渡效果。但是vue也给我们提供了一套规则，用于方便的实现css过渡。
在以下几种情况中，可以给元素和组件添加 进入/离开 过渡 （进入：进入页面，隐藏=>显示
离开：离开页面，显示=>隐藏）
v-if v-show 动态组件 组件根节点
vue会在元素进入/离开的时候，会有6个class的切换，会给元素添加6个class（注意，不是同时添加的，是分阶段的）
v-enter:动画进入之前的初始状态
v-enter-active:动画进入的时间段
v-enter-to:动画进入之后的结束状态
v-leave:动画离开之前的初始状态
v-leave-active:动画离开的时间段
v-leave-to:动画离开之后的结束状态
实现过渡效果的步骤
1.为元素包裹一个transition标签
2.定义类名（vue提供的类名：6个class，分三组）
3.在类名写过渡样式
注意：vue只是给我们提供了几个类名，具体的过渡样式，需要自己书写。
案例
css部分
<script src="vue.js"></script>
<style>
.v-enter,
.v-leave-to {
opacity: 0;
}
.v-enter-to,
.v-leave {
opacity: 1;
}
.v-enter-active,
.v-leave-active {
transition: all 1s linear;
}
</style>
body部分
<div id="app">
<button @click="flag = !flag">点击过渡</button>
<transition>
<h3 v-show="flag">我是过渡效果</h3>
</transition>
</div>
js部分
<script>
var vm = new Vue({
el: "#app",
data: {
flag: true
},
methods: {
}
})
</script>
修改前缀（别名）
vue为我们提供的过渡类名默认都是v-开头的，这样会有一个局限性：假设页面有多个transtion标签，实现不同的过渡效果，那么做起来就不太方便了。可以使用自定义别名来解决。
1.在transition标签上添加name属性
<transition name="my"> my就是我们的别名
2.在定义样式的时候，就可以不用v-开头了，可以用我们的 别名- 开头
举例：.my-enter
如果想要一进入页面，就应用过渡效果，可以给 transition标签添加 appear 属性。
示例
css部分
<script src="vue.js"></script>
<style>
h3,#box {
width: 300px;
background-color: #ff6700;
margin: 10px auto;
}
.my-enter,
.my-leave-to {
opacity: 0;
transform: translate(-80px);
}
.v-enter,
.v-leave-to {
opacity: 0;
transform: translate(80px);
}
.v-enter-to,
.v-leave,.my-enter-to,.my-leave {
opacity: 1;
transform: translate(0px);
}
.v-enter-active,
.v-leave-active ,.my-enter-active,.my-leave-active{
transition: all 1s linear;
}
</style>
body部分
<div id="app">
<button @click="flag = !flag">点击过渡</button>
<transition appear>
<h3 v-show="flag">我是过渡效果</h3>
</transition>
<transition name="my" appear>
<div id="box" v-show="flag">就地过年</div>
</transition>
</div>
js部分
<script>
var vm = new Vue({
el: "#app",
data: {
flag: true
},
methods: {
}
})
</script>
引入第三方类库
1.下载animate.css 官网地址：https://animate.style 可以通过npm yarn
直接下载网址：https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
2.给添加动画的元素添加类名：比如： animate__backInDown
注意：如果想要动画生效，必须添加 animate__animated 低版本：（animated backInDown）
vue过渡配合animate使用：
1.引入animate.css文件
2.在transition标签中指定两个属性。enter-active-class leave-active-class
3.在enter-active-class 中填写 入场动画
4.在leave-active-class中填写 离场动画
【注意】enter-active-class leave-active-class 两个类名是transition标签的关键属性，不是自己定义的。
示例
css部分
<script src="vue.js"></script>
<link rel="stylesheet" href="animate.min.css">
<style>
#box{
width: 300px;
background-color: #ff6700;
margin: 10px auto;
}
.my-enter,.my-leave-to{
opacity: 0;
transform: translate(-80px);
}
.my-enter-to,.my-leave{
opacity: 1;
transform: translate(0px);
}
.my-enter-active,.my-leave-active{
transition: all 1s linear;
}
</style>
body部分
<div id="app">
<button @click="flag = !flag">切换</button>
<!--
注意 animate__animated 这个类名必须加。
-->
<transition enter-active-class="animate__animated animate__backInDown"
leave-active-class="animate__animated animate__backOutDown">
<div id="box" v-show="flag">就地过年</div>
</transition>
</div>
js部分
<script>
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: true
},
methods: {}
});
</script>
过渡钩子
transition组件提供了8个钩子函数可以实现在动画呈现的不同时机做不同的事情。这八个钩子函数可以理解成是动画的生命周期:
- before-enter=“beforeEnter“ ：进入过渡运行前
- enter=“enter“ ：进入过渡运行时
- after-enter=“afterEnter“ ：进入过渡运行后
- @enter-cancelled=“enterCancelled“ ：进入过渡被打断时
- before-leave=“beforeLeave“ ：离开过渡运行前
- leave=“leave“ ：离开过渡运行时
- after-leave=“afterLeave“ ：离开过渡运行后
- leave-cancelled=“leaveCancelled“ ：离开过渡被打断时
示例实现步骤
1.为元素添加 transition: all 1s linear; 样式 或者写在 enter和leave中。
2.在transition组件中定义8个钩子（用哪个写哪个）
3.在methods中定义钩子执行的具体方法。
css部分
<script src="vue.js"></script>
<style>
#box {
width: 300px;
height: 200px;
line-height: 200px;
text-align: center;
background-color: #ff6700;
margin: 0 auto;
transition: all 1s linear;
}
</style>
body部分
<div id="app">
<button @click="flag = !flag">切换</button>
<transition @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">
<div id="box" v-show="flag">没回家的 就别回家了</div>
</transition>
</div>
js部分
<script>
var vm = new Vue({
el: "#app",
data: {
flag: true
},
methods: {
// --------
// 进入中
// --------
//el:要过渡的元素节点对象
beforeEnter: function (el) {
el.style.transform="translate(-80px)"
el.style.opacity="0";
console.log("beforeEnter 进入 过渡前");
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {
// ...
el.offsetWidth
console.log("enter 进入 过渡中");
done()
},
afterEnter: function (el) {
// ...
el.style.transform="translate(0px)"
el.style.opacity="1";
console.log("afterEnter 进入 过渡后");
},
enterCancelled: function (el) {
// ...
console.log("enterCancelled 进入 过渡被打断");
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// 写
el.style.transform="translate(-80px)"
el.style.opacity="0";
console.log("beforeLeave 离开 过渡前");
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
leave: function (el, done) {
// ...
el.offsetWidth
console.log("leave 离开 过渡中");
// done()
},
afterLeave: function (el) {
// ...
el.style.transform="translate(-80px)"
el.style.opacity="0";
console.log("afterLeave 离开 过渡后");
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
console.log("leaveCancelled 离开 过渡被打断");
// ...
}
}
})
</script>
半场动画 （点击加入购物车 小圆点移动到购物车哪里）
css部分
<script src="vue.js"></script>
<style>
#app {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.ball {
background-color: #ff6700;
border-radius: 50%;
width: 20px;
height: 20px;
position: absolute;
transition: all 500ms linear;
}
</style>
body部分
<div id="app">
<button @click="flag = !flag">加入购物车</button>
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
</div>
js部分
var vm = new Vue({
el: "#app",
data: {
flag: false
},
methods: {
beforeEnter(el) {
el.style.transform="translate(0,0)"
},
enter(el, done) {
//可以让浏览器强制渲染
el.offsetWidth
//让小球从（0,0）移动到 （200px,-250px）
el.style.transform = "translate(200px,-250px)"
// done函数必须添加，不然不会执行 afterEnter函数。
done();
},
afterEnter(el) {
//动画结束后 让小球消失
this.flag = !this.flag;
}
}
})
多个元素的过渡 (实现小li的新增与添加)
新增一个li元素，让新增的li元素有一个动画效果。
【注意】 transition组件和template组件一样，只能有一个根元素
在实现列表过渡的时候，如果需要过渡的元素是通过v-for循环出来的，不能使用transition组件，需要使用transition-group组件。
transition-group组件包裹的列表，必须声明key属性。
被transition-group包裹的元素，会默认套上一层span，可以通过tag属性来指定外层包裹的标签。
css部分
<script src="vue.js"></script>
<style>
li{
border:1px dashed #999;
margin: 5px;
line-height: 35px;
padding-left: 5px;
transition: all 1s;
}
li:hover{
background-color: hotpink;
}
.v-enter,.v-leave-to{
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,.v-leave-active{
transition: all 0.6s linear;
}
/* 为了让其他的li元素有一个动画效果。脱标*/
.v-leave-active{
position: absolute;
}
</style>
body部分
<div id="app">
<label>ID:<input type="text" v-model="id"></label>
<label>name:<input type="text" v-model="name"></label>
<button @click="add">添加</button>
<transition-group tag="ul">
<li v-for="(item,i) in list" :key="item.id">{{item.id}}---{{item.name}}---<button @click="del(i)">删除</button></li>
</transition-group>
</div>
js部分
var vm = new Vue({
el:"#app",
data:{
id:"",
name:"",
list:[
{id:1,name:"宋江"},
{id:2,name:"卢俊义"},
{id:3,name:"公孙胜"},
{id:4,name:"关胜"}
]
},
methods:{
add(){
//将用户输入的值添加到list列表中
this.list.push({id:this.id,name:this.name});
//将输入框清空
this.id=this.name=""
},
//删除函数 将元素从list中删除
del(i){
this.list.splice(i,1);
}
}
})
756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
