博客推行版本更新，成果積累制度，已經寫過的博客還會再次更新，不斷地琢磨，高質量高數量都是要追求的，工匠精神是學習必不可少的精神。因此，大家有何建議歡迎在評論區踴躍發言，你們的支持是我最大的動力，你們敢投，我就敢肝 ...

CSS過渡是什麼

在Vue中，可以使用<transition>組件來實現CSS過渡效果。CSS過渡是指在元素的狀態發生改變時，通過添加或移除CSS類來實現平滑的過渡效果。

<transition>組件可以包裹需要過渡的元素，並通過name屬性指定過渡效果的名稱。然後，可以使用CSS樣式來定義過渡的效果。

以下是一個簡單的例子：

<template>
    <transition name="fade-in" appear>
        <ARow v-if="show">
            <ACol>
                <div class="info-card">
                    <div class="info-title">
                        數據總和
                    </div>
                    <div class="info-value">
                        100
                    </div>
                </div>
            </ACol>
        </ARow>
    </transition>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const show = ref(false);

// 在需要的時候觸發過渡效果
setTimeout(() => {
    show.value = true;
}, 1000);
</script>

<style scoped>
.fade-in-enter-active {
    animation: fade-in 1s;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.info-card {
    width: 318px;
    height: 116px;
    background-color: #bebebe;
    box-shadow: 0px 2px 10px 1px rgba(23,179,163,0.07);
    border-radius: 4px;
}

.info-title {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 21px;
    padding: 20px 0 20px 30px;
}

.info-value {
    font-size: 36px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    line-height: 21px;
    padding: 0 0 0 30px;
}
</style>

這段代碼實現了一個簡單的漸入效果的過渡動畫，通過控制 show 的值來觸發過渡效果的顯示

在CSS中，.fade-enter-active和.fade-leave-active類定義了過渡的持續時間和動畫效果。.fade-enter和.fade-leave-to類定義了元素進入和離開時的初始和最終狀態。

通過使用<transition>組件和CSS樣式，可以實現各種過渡效果，如淡入淡出、滑動、縮放等。可以根據具體需求來定義不同的過渡效果。

CSS過渡的書寫格式是什麼

在Vue中使用CSS過渡的步驟和格式如下：

步驟一：定義過渡樣式

在Vue的組件中，可以使用<style>標簽來定義過渡樣式。在Vue 3中，可以使用<style scoped>來限定樣式的作用域。

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

步驟二：使用過渡組件

在Vue的組件中，可以使用過渡組件來包裹需要過渡的元素。在Vue 3中，可以使用<transition>組件來實現過渡效果。

<template>
  <transition name="fade">
    <div v-if="show" class="fade">
      <!-- 過渡的內容 -->
    </div>
  </transition>
</template>

步驟三：觸發過渡效果

在Vue的組件中，可以通過改變數據來觸發過渡效果。在Vue 3中，可以使用v-if或v-show指令來控制元素的顯示和隱藏。

<script setup lang="ts">
import { ref } from 'vue'

const show = ref(false)
</script>

<template>
  <button @click="show = !show">Toggle</button>
  <transition name="fade">
    <div v-if="show" class="fade">
      <!-- 過渡的內容 -->
    </div>
  </transition>
</template>

以上就是在Vue中使用CSS過渡的步驟和格式。通過導入過渡組件、定義過渡樣式、使用過渡組件和觸發過渡效果，可以實現元素的過渡效果。

transition標簽及其屬性

在Vue中，<transition>標簽用於在元素插入或刪除時應用過渡效果。它可以包裹任何元素或組件，並通過添加CSS類來實現過渡效果。

<transition>標簽有以下屬性：

name：指定過渡的名稱，用於自動生成過渡類名，預設值為"v"。
appear：指定是否在初始渲染時應用過渡，預設值為false。
css：指定是否使用CSS過渡，預設值為true。
type：指定過渡的模式，可以是"transition"（預設）或"animation"。
mode：指定過渡的模式，可以是"in-out"（預設）、"out-in"或"default"。
duration：可以設置過渡的持續時間，預設值為 undefined，它會使用內部過渡類提供的預設持續時間。
enter-class：指定進入過渡的CSS類名，預設值為"v-enter"。
enter-active-class：指定進入過渡的活動CSS類名，預設值為"v-enter-active"。
enter-to-class：指定進入過渡的目標CSS類名，預設值為"v-enter-to"。
leave-class：指定離開過渡的CSS類名，預設值為"v-leave"。
leave-active-class：指定離開過渡的活動CSS類名，預設值為"v-leave-active"。
leave-to-class：指定離開過渡的目標CSS類名，預設值為"v-leave-to"。

transition的鉤子函數

除了以上屬性，<transition>標簽還可以使用以下事件鉤子函數：

before-enter：在進入過渡之前觸發。
enter：在進入過渡之後觸發。
after-enter：在進入過渡完成之後觸發。
enter-cancelled：在進入過渡被取消之後觸發。
before-leave：在離開過渡之前觸發。
leave：在離開過渡之後觸發。
after-leave：在離開過渡完成之後觸發。
leave-cancelled：在離開過渡被取消之後觸發。

通過使用<transition>標簽及其屬性，可以輕鬆地為Vue應用中的元素添加過渡效果，提升用戶體驗。

下麵是一個使用<transition>的詳細案例，使用<script setup lang="ts">來書寫：

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @enter-cancelled="enterCancelled" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" @leave-cancelled="leaveCancelled">
      <div v-if="show" class="box"></div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const show = ref(false);

const toggle = () => {
  show.value = !show.value;
};

const beforeEnter = (el) => {
  el.style.opacity = 0;
};

const enter = (el, done) => {
  el.style.transition = 'opacity 1s';
  el.style.opacity = 1;
  el.addEventListener('transitionend', done);
};

const afterEnter = (el) => {
  el.style.transition = '';
};

const enterCancelled = (el) => {
  el.style.opacity = '';
};

const beforeLeave = (el) => {
  el.style.opacity = 1;
};

const leave = (el, done) => {
  el.style.transition = 'opacity 1s';
  el.style.opacity = 0;
  el.addEventListener('transitionend', done);
};

const afterLeave = (el) => {
  el.style.transition = '';
};

const leaveCancelled = (el) => {
  el.style.opacity = '';
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.box {
  width: 200px;
  height: 200px;
  background-color: red;
}
</style>

在上面的案例中，我們使用了<transition>組件來包裹一個具有過渡效果的元素。點擊按鈕時，通過改變show的值來控制元素的顯示和隱藏。

在鉤子函數中，我們可以根據需要設置元素的初始狀態、過渡效果以及執行額外的操作。例如，在beforeEnter鉤子函數中，我們設置元素的初始透明度為0；在enter鉤子函數中，我們設置元素的過渡效果，併在過渡效果執行完畢後調用done函數；在afterEnter鉤子函數中，我們清除元素的過渡效果。

通過使用這些鉤子函數，我們可以實現自定義的過渡效果，併在過渡的不同階段執行相應的操作。

CSS過渡的預定義樣式是什麼

在Vue中，CSS過渡的預定義樣式是通過<transition>組件來實現的。<transition>組件提供了一些預定義的類名，用於在過渡過程中添加或移除CSS類。

以下是Vue中CSS過渡的預定義樣式：

1. v-enter：在元素插入之前添加，插入過渡的開始狀態。
2. v-enter-active：在元素插入之前添加，插入過渡的過程狀態。
3. v-enter-to：在元素插入之後添加，插入過渡的結束狀態。
4. v-leave：在元素移除之前添加，移除過渡的開始狀態。
5. v-leave-active：在元素移除之前添加，移除過渡的過程狀態。
6. v-leave-to：在元素移除之後添加，移除過渡的結束狀態。

這些類名可以通過設置name屬性來自定義，例如<transition name="fade">，則對應的類名為fade-enter、fade-enter-active、fade-enter-to、fade-leave、fade-leave-active、fade-leave-to。

通過在CSS中定義這些類名的樣式，可以實現元素在插入或移除時的過渡效果。例如，可以設置v-enter的opacity為0，v-enter-active的transition屬性為opacity 0.5s，v-enter-to的opacity為1，這樣在元素插入時就會有一個淡入的過渡效果。

需要註意的是，這些類名只在過渡過程中存在，過渡結束後會被移除。如果需要在過渡結束後保持某些樣式，可以使用v-enter-to或v-leave中的!important來覆蓋過渡過程中的樣式。

@keyframes是什麼

@keyframes是CSS中用於創建動畫的關鍵幀規則。它允許開發者定義在動畫過程中元素的不同狀態，並指定每個狀態的樣式屬性。通過使用@keyframes，可以創建複雜的動畫效果，如漸變、旋轉、縮放等。

使用@keyframes，可以定義動畫的關鍵幀，即動畫的不同狀態。每個關鍵幀由一個百分比值（0%到100%）和對應的樣式屬性組成。在動畫過程中，瀏覽器會根據關鍵幀的定義自動計算中間狀態的樣式屬性。

以下是一個使用@keyframes創建動畫的示例：

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.element {
  animation: fadeIn 1s;
}

在上面的示例中，我們定義了一個名為fadeIn的關鍵幀規則。它包含兩個關鍵幀：0%和100%。在0%關鍵幀中，元素的透明度為0；在100%關鍵幀中，元素的透明度為1。通過將fadeIn關鍵幀應用到元素的animation屬性中，我們可以使元素在1秒內從透明度0漸變到透明度1，實現淡入效果。

@keyframes還支持更複雜的動畫效果，可以定義多個關鍵幀，併在每個關鍵幀中指定多個樣式屬性。通過在關鍵幀之間設置合適的百分比值，可以控制動畫的速度和過渡效果。

總結來說，@keyframes是CSS中用於創建動畫的關鍵幀規則。它允許開發者定義動畫的不同狀態和樣式屬性，並通過將關鍵幀應用到元素的animation屬性中，實現各種複雜的動畫效果。

在黑夜裡夢想著光，心中覆蓋悲傷，在悲傷里忍受孤獨，空守一絲溫暖。我的淚水是無底深海，對你的愛已無言，相信無盡的力量，那是真愛永在。我的信仰是無底深海，澎湃著心中火焰，燃燒無盡的力量，那是忠誠永在。

【技術積累】Vue.js中的CSS過渡【一】