平時(shí)我們能在網(wǎng)頁上看到很多動畫效果，這些效果看起來就很引人注目。所以呢，我們是不是也可以在自己的項(xiàng)目中添加一些動畫效果，讓我們的頁面看起來更加的高端大氣上檔次，博人眼球。所以就特意的去學(xué)習(xí)了一下關(guān)于Vue的一些動畫效果，下面是我對實(shí)現(xiàn)動畫效果的一些總結(jié)，希望可以幫助大家，如果有什么不對的地方，還望大佬們批評指正一下，感謝。

前戲準(zhǔn)備

• 先創(chuàng)建一個(gè)Vue項(xiàng)目，并將一些html和css樣式先寫好
• 設(shè)計(jì)一個(gè)小卡片，點(diǎn)擊按鈕就可以出現(xiàn)一個(gè)emoji
• 然后通過添加動畫效果，來修飾emoji的展現(xiàn)和消失。

大致代碼如下：

• template部分：

<div class="page">
    <div class="card">
    
      <div class="card__header">
        <h3 class="card-title">{{ name }}</h3>
        <div class="card-subtitle">Transition & Animation</div>
      </div>
      
      <div class="card__content">
        <div :class="['emoji',{hidden:!isActive}]">?</div>
      </div>
      
      <div class="card__action">
        <button type="button" @click="isActive =!isActive">請按這里</button>
      </div>

    </div>
  </div>

• script setup部分：

import {ref} from 'vue'

const name ='Vue動畫'
const isActive =ref(true)

• style lang="css" scoped部分：為了更好的演示，我將不需要更改的css樣式打包起來，避免代碼太亂了，不好修改。

@import './styles/app.css';
@import './styles/card.css';

• card.css樣式組件：

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 300px;
    box-sizing: border-box;
    padding: 32px;
    margin: 0 auto;
    background: #f8f8f8;
    border-radius: 10px;
  }

  .card__header {
    text-align: center;
    margin-bottom: 32px;
  }

  .card-title {
    margin-bottom: 8px;
  }

  .card-subtitle {
    font-size: 12px;
    color: #989898;
  }

  .card__content {
    min-height: 250px;
  }

  .card__action > button {  
    outline: none;
    border: none;
    background: none;
    border: 2px solid #d3c7c7;
    padding: 10px 24px;
    cursor: pointer;
    margin: 4px;
  }

  .card__action > button:active {
    opacity: 0.8;
  }

• app.css樣式組件

input[type='text'],
textarea,
select {
  padding: 4px 8px;
  margin: 8px 0;
  margin-right: 8px;
  font-size: 16px;
}

label {
  margin-left: 4px;
}
.page {
  padding: 32px;
  margin: 32px;
}

.emoji {
  font-size: 80px;
}

.hidden {
  opacity: 0;
}

這個(gè)時(shí)候的效果圖是這樣的：

css中的transition和transform

在 CSS 中，transition 和 transform 是兩個(gè)非常有用的屬性，它們可以為網(wǎng)頁元素的樣式變化添加動畫效果。那他們該怎么用呢？

transition

transition 用于創(chuàng)建平滑的過渡效果，當(dāng)元素的某個(gè)屬性值發(fā)生改變時(shí)，在指定的時(shí)間內(nèi)逐漸完成過渡。

語法：transition: property duration timing-function delay;

• property：指定要過渡的 CSS 屬性，例如 width、height、background-color 等?？梢灾付ǘ鄠€(gè)屬性，用逗號分隔，也可以不指定。

• duration：過渡的持續(xù)時(shí)間，以秒（s）或毫秒（ms）為單位。

• timing-function：指定過渡的速度曲線，常見的值有 linear（勻速）、ease（默認(rèn)，緩入緩出）、ease-in（緩入）、ease-out（緩出）、ease-in-out（緩入緩出）等 ，一般不設(shè)置的話都是默認(rèn)值ease。

• delay：指定過渡效果的延遲時(shí)間，以秒（s）或毫秒（ms）為單位。

transform

transform 用于對元素進(jìn)行變換操作，例如旋轉(zhuǎn)、縮放、移動、傾斜等。

常見的變換函數(shù)有：

• rotate()：旋轉(zhuǎn)元素，參數(shù)為角度值，例如 rotate(45deg) 表示順時(shí)針旋轉(zhuǎn) 45 度。

• scale()：縮放元素，參數(shù)可以是一個(gè)值（等比例縮放）或兩個(gè)值（分別指定水平和垂直方向的縮放比例），例如 scale(2) 表示放大兩倍，scale(2, 0.5) 表示水平方向放大兩倍，垂直方向縮小一半。

• translate()：移動元素，參數(shù)可以是一個(gè)值（水平移動）或兩個(gè)值（分別指定水平和垂直方向的移動距離），例如 translate(50px) 表示水平向右移動 50 像素，translate(50px, 100px) 表示水平向右移動 50 像素，垂直向下移動 100 像素，不過一般只設(shè)定某個(gè)方向的時(shí)候我們會用到translateX()和translateY()。

• skew()：傾斜元素，參數(shù)可以是一個(gè)值（水平傾斜）或兩個(gè)值（分別指定水平和垂直方向的傾斜角度），例如 skew(30deg) 表示水平傾斜 30 度，skew(30deg, 15deg) 表示水平傾斜 30 度，垂直傾斜 15 度。

不過在實(shí)際應(yīng)用中，transition 和 transform 常常結(jié)合使用，以實(shí)現(xiàn)更加豐富和復(fù)雜的動畫效果。所以我們在app.css樣式組件中的.emoji和.hidden添加一點(diǎn)屬性就好，其他不用修改。

.emoji {
  font-size: 80px;
  transition: 0.5s;
}

.hidden {
  opacity: 0;
  transform: translateX(30px);
}

來看看效果圖：

css中的animation

animation 是 CSS 中用于創(chuàng)建更復(fù)雜和自定義動畫的強(qiáng)大屬性。

語法：

animation: name duration timing-function delay iteration-count direction fill-mode;

• name：指定動畫的名稱，通過 @keyframes 規(guī)則來定義。

• duration：動畫的持續(xù)時(shí)間，以秒（s）或毫秒（ms）為單位。

• timing-function：動畫的速度曲線，與 transition 中的類似，如 linear、ease 等。

• delay：動畫開始前的延遲時(shí)間。

• iteration-count：動畫的播放次數(shù)，可以是具體數(shù)字、infinite（無限次）。

• direction：動畫的播放方向，可選值有 normal（默認(rèn)，正向播放）、reverse（反向播放）、alternate（交替播放，先正向后反向）、alternate-reverse（交替播放，先反向后正向）。

• fill-mode：規(guī)定動畫在執(zhí)行前后的樣式，可選值有 none（默認(rèn)，動畫結(jié)束后回到初始狀態(tài)）、forwards（動畫結(jié)束后保持最后一幀的樣式）、backwards（在動畫延遲期間應(yīng)用動畫的第一幀樣式）、both（向前和向后填充模式都應(yīng)用）。

@keyframes 規(guī)則

通過 @keyframes 來定義動畫的關(guān)鍵幀。

@keyframes pulse {
    from{
        transform:scale3d(1,1,1); 
    }
    50%{
        transform:scale3d(1.5,1.5,1.5);
    }
    to{
        transform:scale3d(1,1,1)
    }
}

定義了pulse動畫的不同狀態(tài)。通過設(shè)定transform屬性中的scale3d()函數(shù)，元素在動畫過程中會在三維空間內(nèi)縮放。具體來說，from關(guān)鍵字表示動畫開始時(shí)元素的狀態(tài)，這里是原始大?。?,1,1）；50%表示動畫中間的狀態(tài)，元素被放大到1.5倍（1.5,1.5,1.5）；to關(guān)鍵字表示動畫結(jié)束時(shí)元素的狀態(tài)，它會回到原始大?。?,1,1），確保動畫循環(huán)時(shí)的連貫性。

animation 相較于 transition 更加靈活和強(qiáng)大，可以創(chuàng)建多關(guān)鍵幀、更復(fù)雜的動畫效果，并且能夠更好地控制動畫的播放次數(shù)、方向等參數(shù)。但同時(shí)，在使用時(shí)也需要注意性能優(yōu)化，避免過度使用復(fù)雜的動畫影響頁面的加載和渲染速度。

OK，那我們再創(chuàng)建一個(gè)animation.css樣式組件：

.pulse{
    animation-name:pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
/* css 性能優(yōu)化  scale3d() GPU加速  動畫不要影響周圍的文檔流（圖層）*/
@keyframes pulse {
    from{
        transform:scale3d(1,1,1); 
    }
    50%{
        transform:scale3d(1.5,1.5,1.5);
    }
    to{
        transform:scale3d(1,1,1)
    }
}

記得在vue中style lang="css" scoped部分引入：

<style lang="css" scoped>
@import './styles/app.css';
@import './styles/card.css';
@import './styles/animation.css';
</style>

并且在template部分修改代碼

來看看效果圖：

vue中的transition內(nèi)置組件

在 Vue 中，transition 是一個(gè)內(nèi)置組件，用于在元素或組件進(jìn)入和離開 DOM 時(shí)應(yīng)用動畫效果。它可以將進(jìn)入和離開動畫應(yīng)用到通過默認(rèn)插槽傳遞給它的元素或組件上。

transition 組件的一些特點(diǎn)和用法如下：

• 觸發(fā)條件：可以由 v-if 或 v-show 所觸發(fā)的切換、動態(tài)組件的切換、組件根節(jié)點(diǎn)的切換或特殊元素 切換的動態(tài)組件觸發(fā)。

• CSS 過渡類：transition 組件會自動檢測目標(biāo)元素是否應(yīng)用了 CSS 過渡或動畫，并在適當(dāng)?shù)臅r(shí)機(jī) 添加和移除 相應(yīng)的 CSS 過渡類。這些過渡類包括 v-enter-from、v-enter-active、v-enter-to、v-leave-from、v-leave-active 和 v-leave-to，用于定義進(jìn)入和離開動畫的不同階段。

  • 修改template部分：

• 添加css樣式：

• 效果圖：

• 過渡效果命名：可以通過給 組件傳遞 name 屬性來聲明一個(gè)過渡效果名，這樣過渡類將以指定的名字作為前綴。
  • 修改template部分：

• 添加css樣式：

• 效果圖：

結(jié)合 CSS 過渡或動畫：一般會搭配原生 CSS 過渡或動畫一起使用，通過設(shè)置 transition或者animation CSS 屬性來定義動畫的屬性、持續(xù)時(shí)間和速度曲線等。

• 修改template部分：

• 添加css樣式（注意這里還調(diào)用了animation.css樣式組件中的css）：

• 效果圖：

當(dāng)然，還有其他的用法，例如：

• 自定義過渡類：可以向 組件傳遞 enter-from-class、enter-active-class、enter-to-class、leave-from-class、leave-active-class 和 leave-to-class 等屬性來指定自定義的過渡類，這些類的優(yōu)先級高于普通類名。

• JavaScript 鉤子函數(shù)：提供了一些 JavaScript 鉤子函數(shù)，如 beforeEnter、enter、afterEnter、enterCancelled、beforeLeave、leave、afterLeave 和 leaveCancelled 等，可以在這些鉤子函數(shù)中執(zhí)行自定義的 JavaScript 邏輯。

通過合理使用 transition 組件和相關(guān)的過渡類、鉤子函數(shù)，可以實(shí)現(xiàn)各種豐富的動畫效果，提升用戶體驗(yàn)。同時(shí)，可以結(jié)合 CSS 過渡和動畫來進(jìn)一步增強(qiáng)動畫的表現(xiàn)力。

第三方庫Animate.css

在 Vue 項(xiàng)目中使用 animation.css 庫，您可以按照以下步驟進(jìn)行操作：

• 安裝 animation.css 庫：您可以使用 npm 或 yarn 來安裝。

  • 使用 npm ：npm install animation.css

  • 使用 yarn ：yarn add animation.css

• 在 Vue 組件中引入 animation.css 樣式文件。在main.js中引入

• 然后組件的模板中，為需要添加動畫的元素添加相應(yīng)的類名。animation.css 提供了很多預(yù)定義的動畫類名，我們可以根據(jù)需要選擇。 我們可以在Animate.css文檔中進(jìn)行挑選，并查看如何使用。

• 引入 Animate.css 后，將類animate__animated與任何動畫名稱一起添加到元素（不要忘記animate__前綴?。?/p>

  • 修改template部分：

• 效果圖：

結(jié)語

制作動畫的效果有很多，在我們的項(xiàng)目中加入這些動畫效果，更能博人眼球引人注目，顯得更加的高端優(yōu)雅。希望這些可以幫助到你，結(jié)合你天馬行空的想法，去制作多種動畫效果。

以上就是Vue中實(shí)現(xiàn)動畫效果的多種方法小結(jié)的詳細(xì)內(nèi)容，更多關(guān)于Vue實(shí)現(xiàn)動畫效果的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論