transition過渡
文檔: https://cn.vuejs.org/v2/guide/transitions.html#CSS-%E8%BF%87%E6%B8%A1
transition標簽包裹router-view or 狀態(tài)切換的標簽 才能實現(xiàn)過度動效!!!
v-enter / v-leave: 進入/離開過度的開始狀態(tài);
v-enter-to / v-leave-to: 進度/離開過度的結(jié)束狀態(tài);
v-enter-active / v-leave-active: 進入/離開過度時的生效狀態(tài);
提供了以上6個類名 or 使用name自定義transition
<style type="text/css">
.cc-enter-active, .cc-leave-active{ /* 進入 / 離開 過度生效狀態(tài) */
transition: all .5s;
}
.cc-enter, .cc-leave-to{ /* 進入狀態(tài) & 結(jié)束狀態(tài) 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{ /*過度進入時初始狀態(tài)*/
opacity: 0;
transform: translateX(100px);
}
.v-enter-to, .v-leave{ /*進入過度結(jié)束狀態(tài) & 過度結(jié)束離開初始狀態(tài)*/
opacity: 1;
transform: translateX(0px);
}
.v-leave-to{ /*過度結(jié)束狀態(tài)*/
opacity: 0;
transform: translateX(-100px);
}
.v-enter-active,.v-leave-active{ /*過度動效*/
transition: all .2s ease;
}
p{
position: absolute; /* 解決當translateX 進入和離開時的狀態(tài) 朝同一方向移動時往产，會發(fā)生該節(jié)點從Dom樹上刪除而導致重繪 發(fā)生閃跳*/
}
</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 { /*進入時執(zhí)行的動畫*/
animation: mmm .5s;
}
.sss-leave-active { /*離開時執(zhí)行的動畫*/
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第三方動畫插件結(jié)合使用
<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中間的內(nèi)容切換動畫 step1.-->
<transition mode="out-in">
<!-- 點擊tabbar組件跳轉(zhuǎn)不同的頁面贡茅，共同顯示的中間內(nèi)容 -->
<router-view></router-view>
</transition>
<!-- tablebar -->
<nav class="mui-bar mui-bar-tab">
<router-link class="mui-tab-item-li" to="/home"> <!--在index.js中l(wèi)inkactive被替換的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占據(jù)空間,是為了中間顯示內(nèi)容不會隱藏到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;
}
/* 結(jié)合transition使用的過渡切換效果
進入和離開時的動畫弓乙，都是頁面向左整個移動整個頁面距離
step2.*/
