transition標簽 vue動畫

一、<transition> 　　使用transition標簽包裹，

<transition>
      <div class="page-login--layer" v-show="show"></div>
</transition>       
 　　　　/*v-enter 是進入之前，元素的起始狀態*/
        /*v-leave-to 離開之后動畫的終止狀態*/
.v-enter, .v-leave-to {
    opacity: 0; /*透明度*/
    transfrom: translateX(150px);
}

        /*入場(離場)動畫的時間段   */
.v-enter-active, v-leave-active {
    tansition: all 0.8s ease;
}    

// 帶有名字的transition
<transition name="myTransition">
      <div class="page-login--layer" v-show="show"></div>
</transition>

.myTransition-enter,
.myTransition-leave-to {
  opacity: 0;
  transform: translateX(150px);
}
.myTransition-enter-active,
.myTransition-leave-active {
  transition: all 0.8s ease;
}

二、<transiton-group> 使用transition-group包裹的標簽

　　在實現列表過渡時，如果需要過渡的元素是通過 v-for 渲染出來的，不能使用 transition 包裹，而是需要使用 transition-group

　　若需要為 v-for 循環創建的元素設置動畫，必須為每個元素綁定 :key 屬性

<transition-group tag="ul">
    <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
        {{ item.id }} --- {{ item.name }}
    </li>
</transition-group>        

.v-enter,.v-leave-to{
    opacity: 0;
    transform: translateY(80px);
}

.v-enter-active,.v-leave-active{
     transition: all 0.6s ease;
}

        /*v-move 和 v-leave-active 配合使用，能夠實現列表后續的元素，漸漸地漂上來的效果 */

.v-move{
     transition: all 0.6s ease;
}
.v-leave-active{
    position: absolute;
}    

ps: 參考https://blog.csdn.net/weixin_42218847/article/details/81474923

// 帶有名字的transition-group

<transition-group name='flip-list' tag='ul' mode='in-out'>
    <li v-for='item in items' :key='item' class='flip-list-item'>      
        {{item}}
    </li>
</transition-group>

樣式：
.flip-list-enter,.flip-list-leave-to {
    opacity:0;
    transform: translateX(50px);
}

.flip-list-enter-active,.flip-list-leave-active {
    transition: all 1s ease;
}

.flip-list-move {
    transition: all 1s;
}
/**
 * 要讓刪除的元素先脫離文檔流，旁邊的元素才能過渡過來
 */
.flip-list-leave-active {
    position:absolute;
}

三、element UI同時也內置了過度動畫

https://element.eleme.cn/#/zh-CN/component/transition

提供 el-fade-in-linear 和 el-fade-in 兩種效果。

zoom 縮放：
    提供 el-zoom-in-center，el-zoom-in-top 和 el-zoom-in-bottom 三種效果。

fade 淡入淡出
    提供 el-fade-in-linear 和 el-fade-in 兩種效果。

collapse 展開折疊
    使用 el-collapse-transition 組件實現折疊展開效果。

<transition name="el-fade-in-linear"> 
    <div v-show="show" class="transition-box">
        .el-fade-in-linear
    </div> 
</transition> 

<transition name="el-fade-in"> 
    <div v-show="show" class="transition-box">
        .el-fade-in
    </div>
</transition>

四、transition、transform、translate的區別和聯系

　　1. transform 是 轉換 ，例如位移，縮放和旋轉，位移函數名就是translate，translate是transform的一部分。
　　2. transition是過渡，指的是某個CSS屬性值如何平滑的進行改變，就是平常說的 動效。而transform是沒有動畫效果，你改變了它的值，元素的樣子就唰的改變了。

 　　

transition 基本用法：

　　transition： [屬性名] [持續時間] [速度曲線] [延遲時間]

　　transition： all 2s ease 0.5s; // 所有屬性動畫

　　transition： height 2s, width 3s; // 給多個屬性多個過渡

transform： 轉換，基本用法

　　transform：[轉換函數]；

　　2D轉換中，通常有，位移translate(x,y), 縮放scale(x,y), 旋轉rotate(angle)

　　　　transform: translate(10px, 10px) rotate(10deg); // 向下向右平移10像素，並順時針旋轉10度

　　　　attention: 轉換函數之間可沒有逗號。

ps:參考https://www.jianshu.com/p/80f6051389bd

.box {
    width: 100px;
    height: 100px;
    transition: all 0.4s ease;
}

.box:hover {
    width: 120px;
    height: 120px;
}
如果使用transition監聽基本屬性，例如height或width等，其值在發生改變時就會對文檔流產生影響，比如下圖，鼠標懸停的div長寬變化會把其他的div給“擠開”，甚至最邊上的還擠到了下一行。並且，可以長寬屬性在發生變化時元素的固定點不是中心，而是左上角，


因為transform只會影響當前元素的狀態，達到類似position: relative;的效果，而且transform是默認基於元素的中心進行轉換的，就算想改的話也可以使用transform-origin屬性進行修改

.box {
    width: 100px;
    height: 100px;
    transition: all 0.4s ease;
}

.box:hover {
    transform: scale(1.2, 1.2);
}