程式狂想筆記

一個攻城師奮鬥史

0%

Vue 動畫過渡(Transition) 筆記

發表於 分類於 Disqus：

Vue 動畫過渡(Transition) 筆記

WEB 動畫知識

一個是 Transition，另一個是 Animation。

Transition / Animation 釐清差異

可參考

Vue 的規範

Enter
畫面顯示(如 v-if 出來)

  1. xxx-enter-from, xxx-enter-active
  2. xxx-enter-active
  3. xxx-enter-to, xxx-enter-active
  4. no(Vue-transition) class

Leave
畫面移除(如 v-if 移除)

  1. xxx-leave-from, xxx-leave-active
  2. xxx-leave-active
  3. xxx-leave-to, xxx-leave-active
  4. no(Vue-transition) class

xxx怎麼命名

透過html

1
<transition name="bounce">

  • bounce-leave-from
  • bounce-leave-active
  • bounce-leave-to
  • bounce-leave-active

一般使用

搭配 Vue 過渡 (Enter/Leave & List Transitions)

1
2
3
4
5
6
7
<transition name="bounce">
    <p v-if="show">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis
     enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi
     tristique senectus et netus.
   </p>
</transition>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

小記重點

  1. <transition>的 name(xxx)
  2. 設定 xxx-leave-from, xxx-leave-active, xxx-enter-to 過渡屬性

搭配 Vue 過渡 (Enter/Leave & List Transitions) class

  • enter-from-class
  • enter-active-class
  • enter-to-class
  • leave-from-class
  • leave-active-class
  • leave-to-class

使用 animate class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css"
  rel="stylesheet"
  type="text/css"
/>

<div id="demo">
  <button @click="show = !show">
    Toggle render
  </button>

  <transition
    name="custom-classes-transition"
    enter-active-class="animate__animated animate__tada"
    leave-active-class="animate__animated animate__bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</div>

簡單重點，不需考慮 form/to 概念`。

  1. name=”custom-classes-transition”
  2. enter-active-class=”animate__animated animate__tada”
  3. leave-active-class=”animate__animated animate__bounceOutRight”

回憶第一步驟 name 做甚麼?

對於這些在過渡中切換的類名來說，如果你使用一個沒有名字的 <transition>，則 v- 是這些class名的默認前綴。如果你使用了 <transition name="my-transition">，那麼 v-enter-from會替換為 my-transition-enter-from。

上面xxx怎麼命名有提到，感覺很容易忘記是這樣命名。

搭配 Animate.css

可以看【Day 26】CSS Animation - CSS 動畫資源蒐集與使用教學 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

官網建議

  1. 不要使用 root Element (html,body)
  2. 不要使用大的 Element 做動畫 (Bad UX)
  3. 不要使用無限動畫(分心使用者注意力)
  4. Mind the initial and final state of your elements(animation-fill-mode)
  5. 不能用在inline(要使用 inline-block)

滾動到畫面觸發動畫

How to trigger a CSS animation on scroll

IntersectionObserver

1
2
3
4
5
6
7
8
9
10
11
12
const observer = new IntersectionObserver(entries => {
  // Loop over the entries
  entries.forEach(entry => {
    // If the element is visible
    if (entry.isIntersecting) {
      // Add the animation class
      entry.target.classList.add('square-animation');
    }
  });
});

observer.observe(document.querySelector('.square'));

這邊題外話，之前有看過 Observer，這邊也有看到vue-chat-scroll和MutationObserver小記 | 程式狂想筆記，雖然兩者沒關係，可以看更多 Observer 在Web APIs | MDN搜尋 Observer`。

彩蛋

我猜我應該沒有空整理這個，先貼上來吧。

認識 Intersection Observer API：實作 Lazy Loading 和 Infinite Scroll | by Mike Huang | 麥克的半路出家筆記 | Medium

沒想到 lazy load 圖片，還能做到 Infinite Scroll 。這麼強大。

WeakMap and WeakSet（弱映射和弱集合）