transition过渡
文档: https://cn.vuejs.org/v2/guide/transitions.html#CSS-%E8%BF%87%E6%B8%A1
transition标签包裹router-view or 状态切换的标签 才能实现过度动效!!!
v-enter / v-leave: 进入/离开过度的开始状态;
v-enter-to / v-leave-to: 进度/离开过度的结束状态;
v-enter-active / v-leave-active: 进入/离开过度时的生效状态;
提供了以上6个类名 or 使用name自定义transition
<style type="text/css">
.cc-enter-active, .cc-leave-active{ /* 进入 / 离开 过度生效状态 */
transition: all .5s;
}
.cc-enter, .cc-leave-to{ /* 进入状态 & 结束状态 opacity为0 */
opacity: 0;
transform: translateX(10px);
}
</style>
<div id="app">
<button @click="isShow = !isShow">click</button>
<transition name="cc"> <!---使用过度自定义name--->
<div v-show="isShow">11</div>
</transition>
</div>
<style type="text/css">
.v-enter{ /*过度进入时初始状态*/
opacity: 0;
transform: translateX(100px);
}
.v-enter-to, .v-leave{ /*进入过度结束状态 & 过度结束离开初始状态*/
opacity: 1;
transform: translateX(0px);
}
.v-leave-to{ /*过度结束状态*/
opacity: 0;
transform: translateX(-100px);
}
.v-enter-active,.v-leave-active{ /*过度动效*/
transition: all .2s ease;
}
p{
position: absolute; /* 解决当translateX 进入和离开时的状态 朝同一方向移动时，会发生该节点从Dom树上删除而导致重绘 发生闪跳*/
}
</style>
<div id="app">
<button @click="isShow = !isShow">click</button>
<div>
<transition>
<p key="1" v-if="isShow">Lorem ipsum dolor sit amet.</p>
<p key="2" v-else>no data</p>
</transition>
</div>
</div>
vue 动画
<style type="text/css">
.sss-enter-active { /*进入时执行的动画*/
animation: mmm .5s;
}
.sss-leave-active { /*离开时执行的动画*/
animation: mmm .5s reverse; /*reverse 进入时0%到100%,离开时100%到0%*/
}
@keyframes mmm {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
div{
max-width: 200px;
}
</style>
<div id="app">
<button @click="isShow = !isShow">click</button>
<div>
<transition name="sss">
<p v-if="isShow">Lorem ipsum dolor sit amet.</p>
</transition>
</div>
</div>
自定义过度类名 & animate.css第三方动画插件结合使用
<div id="app">
<button @click="isShow = !isShow">click</button>
<transition
enter-active-class="animated bounce" //进入时动效
leave-active-class="animated bounceOutRight"> //离开时动效
<p v-show="isShow">22222</p>
</transition>
</div>
先引入animate.css
多元素过度
<style type="text/css">
.sss-enter-active {
animation: mmm .2s;
}
.sss-leave-active {
animation: mmm .2s reverse;
}
@keyframes mmm {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
div{
max-width: 200px;
}
</style>
<div id="app">
<button @click="isShow = !isShow">click</button>
<div>
<transition name="sss" mode="out-in"> //不添加mode就是同时
<p key="1" v-if="isShow">Lorem ipsum dolor sit amet.</p>
<p key="2" v-else>no data</p>
</transition>
</div>
</div>
<style type="text/css">
.sss-enter-active {
animation: sta .2s;
}
.sss-leave-active {
animation: lea .2s;
}
@keyframes sta {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
@keyframes lea {
0% {
opacity: 1;
transform: translateX(0px);
}
100% {
opacity: 0;
transform: translateX(-100px);
}
}
div{
max-width: 200px;
position: relative;
}
p{
position: absolute;
}
</style>
<div id="app">
<button @click="isShow = !isShow">click</button>
<div>
<transition name="sss">
<p key="1" v-if="isShow">Lorem ipsum dolor sit amet.</p>
<p key="2" v-else>no data</p>
</transition>
</div>
</div>
实际应用
app.vue中设置页面切换全局动画
<template>
<div class="app-container">
<!-- 页头 -->
<mt-header v-show="$route.meta.showHeader" class="mt-header" fixed title="vue-project">
<span slot="left" @click="goBack" v-show="flag">
<mt-button icon="back">返回</mt-button>
</span>
</mt-header>
<!-- 点击tabbar中间的内容切换动画 step1.-->
<transition mode="out-in">
<!-- 点击tabbar组件跳转不同的页面，共同显示的中间内容 -->
<router-view></router-view>
</transition>
<!-- tablebar -->
<nav class="mui-bar mui-bar-tab">
<router-link class="mui-tab-item-li" to="/home"> <!--在index.js中linkactive被替换的mui-active-->
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</router-link>
<router-link class="mui-tab-item-li" to="/member">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">会员</span>
</router-link>
<router-link class="mui-tab-item-li" to="/cart">
<span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span class="mui-badge">{{$store.getters.getAllCount}}</span></span>
<span class="mui-tab-label">购物车</span>
</router-link>
<router-link class="mui-tab-item-li" to="/search">
<span class="mui-icon mui-icon-search"></span>
<span class="mui-tab-label">搜素</span>
</router-link>
</nav>
</div>
</template>
style
.app-container{
padding-top: 40px;
padding-bottom: 50px; /*设置导航头与tabbar占据空间,是为了中间显示内容不会隐藏到those的背后*/
overflow-x: hidden; /*隐藏动画translateX(-100%)多余部分 step3.*/
/* max-width: 600px; */
/* margin: 0 auto; */
}
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(-100%);
}
.v-enter-active,.v-leave-active{
transition: all 0.2s ease;
}
/* 结合transition使用的过渡切换效果
进入和离开时的动画，都是页面向左整个移动整个页面距离
step2.*/
