VUE 過渡和動畫的一些區別和我的理解

Vue官方的語言實在令我難以理解,因而本身寫了一個demo,才能完全理解官方文檔.我想總結一下

概念:

過渡(Transitions)

運用到了css中的transition屬性所以得名(我的理解)

我將過渡(Transitions)分爲"出現"和"消失"兩大塊(動畫Animations同理)

Vue將過渡(Transitions)定義了6個class類名,以下:

1. "出現"
   v-enter : "出現""開始的樣子
   v-enter-active : "出現"過程的定義(時間,延遲和曲線函數)
   v-enter-leave : "出現"最後的樣子
2. "消失"
   v-leave: "消失""開始的樣子
   v-leave-active : "消失"過程的定義(時間,延遲和曲線函數)
   v-leave-leave : "消失"最後的樣子

官方的例子:

//css
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

//js show默認是false
<div id="example-1">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition name="slide-fade">
    <p v-if="show">hello</p>
  </transition>
</div>

官方的例子中,css只定義了4個過渡css,說好的6個狀態呢?我是一臉懵逼,並且動起來還很流暢.

1.缺失的第一個狀態:v-enter-leave
過渡"出現"動畫結束後,他會展現DOM元素,
官方省略了"v-enter-leave",由於這個DOM元素展現的樣子也正是咱們"v-enter-leave"想要的效果,所以省略且不會影響動畫效果

2.缺失的第二個狀態:v-leave
過渡"消失"開始的第一幀也真是咱們DOM元素的樣子,所以省略且不會影響動畫效果

從上面的例子咱們也得出了,原來過渡和DOM元素實際上是沒有什麼關係的,咱們能夠將過渡和DOM出現徹底分開.
1."出現"流程走一遍
2.DOM元素出現
3.'消失'流程走一遍
後面提到的動畫(Animations)也是此流程

動畫(Animations)

運用到了css中的animation屬性所以得名(我的理解)

正如官方所說,動畫和過渡相同,惟一的區別是:

動畫與過渡的區別是在動畫中 v-enter 類名在節點插入 DOM 後不會當即刪除，而是在 animationend 事件觸發時刪除

官方代碼:

.bounce-enter-active {
        animation: bounce-in 10s;
    }
    .bounce-leave-active {
        animation: bounce-in 10s reverse;
    }
    @keyframes bounce-in {
        0% {//這裏起是就至關於 v-enter
            transform: scale(0);
        }
        50% {
            transform: scale(1.5);
        }
        100% {
            transform: scale(1);
        }
    }

WF??徹底不懂,上面的話我理解了好久..在區別中解釋這句的理解

區別

1.過渡(Transitions)和動畫(Animations)使用的css屬性不一樣
2.動畫(Animations)裏面的0% 其實就至關於過渡(Transitions)的v-enter,這樣就好理解了官方的那句話了,動畫(Animations)過程當中的0% 在"出現"或者"消失"完畢以後是一直存在的,直到"出現"或"消失"結束後才被去除.

再換一種粗略的說法,過渡(Transitions)的"出現"和"消失"裏面的三個類是能夠分開一步一步走的,
而動畫(Animations)的"出現"和"消失"裏面的三個類是不能分開的,同生死的.

若是錯誤,請多多指教~