Vue 3現實生活中的過渡和微互動

前端小智發表於2023-04-05
Vue
本文首發於微信公眾號：大遷世界, 我的微信：qq449245884，我會第一時間和你分享前端行業趨勢，學習途徑等等。
更多開源作品請看 GitHub https://github.com/qq449245884/xiaozhi ，包含一線大廠面試完整考點、資料以及我的系列文章。

Vue 提供了一種簡單優雅的處理動畫的方法。你可以透過新增一個 <transition /> 指令輕鬆應用它們，該指令為你完成所有繁重的工作。或者，你可以利用 JavaScript 鉤子將更復雜的邏輯納入你的動畫中，甚至可以新增第三方庫（如 gsap）以實現更高階的用例。

在本文中，我們將研究這些不同的選項，但首先，讓我們暫時將 Vue.js 放在一邊，討論 CSS 過渡和動畫之間的差異。

過渡與動畫

過渡是在兩個不同狀態之間進行的。開始狀態和結束狀態。例如，對於模態元件，開始狀態可能是隱藏的，結束狀態可能是可見的。你設定這些狀態，瀏覽器會用一系列中間幀填充狀態更改。

button {
  background-color: #0ff1ce;
  transition: background-color 0.3s ease-in;
}
button:hover {
  background-color: #c0ffee;
}

如果你想執行一些不涉及明確的起始狀態和結束狀態的操作，或者你需要更精細地控制過渡中的關鍵幀，那麼你必須使用動畫。

button:hover {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: wobble;
}

@keyframes wobble {
  0%,
  100% {
    transform: translateX(0%);
    transform-origin: 50% 50%;
  }
  
  15% {
    transform: translateX(-32px) rotate(-6deg);
  }
  
  30% {
    transform: translateX(16px) rotate(6deg);
  }
  
  45% {
    transform: translateX(-16px) rotate(-3.6deg);
  }
  
  60% {
    transform: translateX(10px) rotate(2.4deg);
  }
  
  75% {
    transform: translateX(-8px) rotate(-1.2deg);
  }
}

結果：

如果考慮到可以動畫化許多屬性，可以將多個動畫應用於一個元素，並且可以使用javascript來控制它們，那麼動畫的可能性就無窮無盡。

要了解更多資訊，請閱讀關於使用CSS動畫（MDN）的文章，並嘗試使用這個CSS動畫生成器進行操作。

透過使用內建的 transition 指令，可以輕鬆地在 Vue.js 專案中使用過渡和動畫。在動畫過程中，Vue 會為封閉的元素新增適當的類。

image.png

Transition Classes

Enter

  1. v-enter-from：起始狀態。
  2. v-enter-active：活動狀態。在整個動畫階段都會應用。
  3. v-enter-to：結束狀態。

Leave

  1. v-leave-from：起始狀態。
  2. v-leave-active：離開的活動狀態。在整個動畫階段都會應用。
  3. v-leave-to：結束狀態。
  4. 在命名過渡的情況下，名稱將替換 v- 字首。

起初，這對我來說有些令人困惑，但當我們深入程式碼時，一切都會更容易理解。讓我們從例子開始。

動畫示例

為了簡潔起見，一些標記的細節被省略，但所有內容包括實時演示都可在Github上找到。

帶漸變動畫的切換

<button @click="toggle">Toggle</button>
<transition name="fade">
  <div class="box" v-if="!isHidden"></div>
</transition>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

帶滑動動畫的切換

在兩個按鈕之間切換

<transition name="fade" mode="out-in">
  <button @click="toggle" v-if="!isHidden" key="first">First State</button>
  <button @click="toggle" v-else key="second">Second State</button>
</transition>
<transition name="fade" mode="out-in">
  <button @click="toggle" v-if="!isHidden" key="first">First State</button>
  <button @click="toggle" v-else key="second">Second State</button>
</transition>

在兩個國家之間切換

.bounce-enter-active {
  animation: bounce 0.3s;
}
.bounce-leave-active {
  animation: bounce 0.3s reverse;
}

@keyframes bounce {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

列表新增、刪除和洗牌

.list-enter-active,
.list-leave-active {
  transition: all 0.3s;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: scale(0);
}

/* Shuffle */
.list-move {
  transition: transform 0.6s;
}

Modal

.modal-enter-from {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter-from .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

卡片動畫

/* moving */
.slideLeft-move {
  transition: all 0.6s ease-in-out 0.05s;
}

/* appearing */
.slideLeft-enter-active {
  transition: all 0.4s ease-out;
}

/* disappearing */
.slideLeft-leave-active {
  transition: all 0.2s ease-in;
  position: absolute;
  z-index: 0;
}

/* appear at / disappear to */
.slideLeft-enter-from,
.slideLeft-leave-to {
  opacity: 0;
}

展開/收起動畫

.list-enter-active,
.list-leave-active {
  transition: all 0.5s;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  height: 0;
}

進階動畫

<div class="progress-steps">
    <div class="progress">
      <div class="percent" :style="{width: `${ (progress-1) * 30 }%`}"></div>
    </div>
    <div class="steps">
      <div class="step" v-for="index in 4" @click="setProgress(index)" :key="index" :class="{'selected': progress === index,  
     'completed': progress > index }"></div>
    </div>
  </div>
.container {
  position: relative;
  margin-top: 100px;
}
.progress-steps {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.steps {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 200px;
}
.step {
  width: 20px;
  height: 20px;
  background: #ffffff;
  border: 2px solid lightgray;
  border-radius: 50%;
  transition: all 0.6s;
  cursor: pointer;
}
.step.selected {
  border: 2px solid #42b983;
}
.step.completed {
  border: 2px solid #42b983;
  background: #42b983;
  border-radius: inherit;
}
.step.completed:before {
  font-family: "FontAwesome";
  color: white;
  content: "\f00c";
}
.progress {
  position: absolute;
  width: 100%;
  height: 50%;
  border-bottom: 2px solid lightgray;
  z-index: -1;
}
.percent {
  position: absolute;
  width: 0;
  height: 100%;
  border-bottom: 2px solid #42b983;
  z-index: 1;
  transition: width 0.6s;
}

導航動畫

導航動畫
This example heavily levarages javascript and the gsap library
source code

與Vue 2的區別

動畫是受 Vue 3 遷移影響的眾多功能之一。遷移構建不會將其報告為重大更改，這可能會令人困惑。

舊類如下：

image.png

正如你所看到的，.v-enter和.v-leave類現在被.v-enter-from和.v-leave-from替換了。此外，控制動畫類名的過渡元素props的名稱從enter-class和leave-class更改為enter-class-from和leave-class-from。

總結

本文介紹了Vue.js在現實生活中如何實現轉換和微互動的例子，以及這些功能是如何提高使用者體驗的。作者指出，Vue.js是一個靈活的框架，可用於實現各種各樣的功能。文章中介紹了一些常見的轉換和微互動，如彈出視窗、拖動、下拉重新整理等，以及如何使用Vue.js實現這些效果。

文章強調了使用者體驗的重要性，並提供了一些技巧，如利用動畫和顏色來吸引使用者的注意力，提高使用者的參與度。作者還介紹了一些Vue.js外掛和庫，如Vue-Router、Vuex和Axios，以及如何使用它們來簡化程式碼和提高效率。

最後，文章提醒讀者注意使用這些效果時的注意事項，如避免使用過多的動畫和效果，以免降低效能和使用者體驗。

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：https://fadamakis.com/vue-js-real-life-transitions-and-micro-...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章