最近开发的过程中用到了vue的transition组件,写一下自己的心得体会。
transition的作用
首先我的理解是transition是作为元素切换时的过渡动画,例如在一个div进行v-if,v-show的时候,他的显示与隐藏分别进行怎样的变幻,都可以由transition进行控制。
transition的属性
- v-enter:元素显示/插入前的效果,例如:transform: translateX(-200%);
- v-active-enter:元素显示/插入的过渡时间和函数,例如:transition: all 0.3s ease;
- v-enter-to:元素显示/插入后的效果,例如:transform: translateX(-100%);
- v-leave:元素隐藏/移除前的效果,例如:transform: translateX(0);
- v-active-leave:元素隐藏/移除的过渡时间和函数,例如:transition: all 0.3s ease;
- v-leave-to:元素隐藏/移除后的效果,例如:transform: translateX(100%);
transition动画的实现是依靠css进行控制的,一般而言v-active-enter和v-active-leave的样式是一样的,因为这两个是定义过渡的状态,例如过渡的曲线、时间。
如果页面有多个transition的话可以通过修改name属性,分别给不同的transition添加变幻样式。
案例:
<template>
<div class="page">
<transition name="fade">
<div v-if="formType==0" class="form-main" key="form1">
</div>
<div v-else class="form-main" key="form2">
</div>
</transition>
</div>
</template>
<style>
.page{
position: relative;
width: 100%;
display: flex;
}
.form-main{
width: 100%;
flex-shrink: 0;
}
.fade-enter-active, .fade-leave-active {
transition: all 0.3s ease;
}
.fade-enter{
transform: translateX(-200%);
}
.fade-enter-to{
transform: translateX(-100%);
}
.fade-leave{
transform: translateX(0);
}
.fade-leave-to{
transform: translateX(100%);
}
</style>
上例的效果如下:
这里的案例省略了很多代码,但效果是相同的。
由这里我们可以使用transition组件进行页面切换添加动画:
即使用下面的方式进行切换:
<template>
<div class="page">
<transition>
<keep-alive>
<router-view/>
</keep-alive>
</transition>
</div>
</template>
详细案例请查看:https://blog.csdn.net/qq_41756580/article/details/106275305
注意:
transition内部如果包裹的多个相同tag(标签)的元素时,需要给每个标签添加不同的key用以区别。否则的话动画不会生效。