vue中的过渡介绍与案例
什么是vue过渡:元素在显示和隐藏时,不会直接显示和隐藏,而是会有一个过渡或动画效果。过渡能够提升用户的体验。我们可以通过控制类名或样式的方式,自己去实现元素或组件的过渡效果。但是vue也给我们提供了一套规则,用于方便的实现css过渡。在以下几种情况中,可以给元素和组件添加 进入/离开 过渡(进入:进入页面,隐藏=>显示离开:离开页面,显示=>隐藏)v-ifv-show动态组件组件根节
什么是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);
}
}
})
更多推荐
所有评论(0)