腳本之家服務器常用軟件

快捷導航

Vue中實現(xiàn)動畫效果的多種方法小結

更新時間：2024年07月17日 09:21:52 作者：常樂hhh

平時我們能在網頁上看到很多動畫效果,這些效果看起來就很引人注目,我們是不是也可以在自己的項目中添加一些動畫效果,讓我們的頁面看起來更加的高端大氣上檔次,博人眼球,所以本文給大家介紹了Vue中實現(xiàn)動畫效果的多種方法,需要的朋友可以參考下

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

前戲準備

先創(chuàng)建一個Vue項目，并將一些html和css樣式先寫好
設計一個小卡片，點擊按鈕就可以出現(xiàn)一個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;
}

這個時候的效果圖是這樣的：

css中的transition和transform

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

transition

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

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

property：指定要過渡的 CSS 屬性，例如 width、height、background-color 等?？梢灾付ǘ鄠€屬性，用逗號分隔，也可以不指定。
duration：過渡的持續(xù)時間，以秒（s）或毫秒（ms）為單位。
timing-function：指定過渡的速度曲線，常見的值有 linear（勻速）、ease（默認，緩入緩出）、ease-in（緩入）、ease-out（緩出）、ease-in-out（緩入緩出）等，一般不設置的話都是默認值ease。
delay：指定過渡效果的延遲時間，以秒（s）或毫秒（ms）為單位。

transform

transform 用于對元素進行變換操作，例如旋轉、縮放、移動、傾斜等。

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

rotate()：旋轉元素，參數(shù)為角度值，例如 rotate(45deg) 表示順時針旋轉 45 度。
scale()：縮放元素，參數(shù)可以是一個值（等比例縮放）或兩個值（分別指定水平和垂直方向的縮放比例），例如 scale(2) 表示放大兩倍，scale(2, 0.5) 表示水平方向放大兩倍，垂直方向縮小一半。
translate()：移動元素，參數(shù)可以是一個值（水平移動）或兩個值（分別指定水平和垂直方向的移動距離），例如 translate(50px) 表示水平向右移動 50 像素，translate(50px, 100px) 表示水平向右移動 50 像素，垂直向下移動 100 像素，不過一般只設定某個方向的時候我們會用到translateX()和translateY()。
skew()：傾斜元素，參數(shù)可以是一個值（水平傾斜）或兩個值（分別指定水平和垂直方向的傾斜角度），例如 skew(30deg) 表示水平傾斜 30 度，skew(30deg, 15deg) 表示水平傾斜 30 度，垂直傾斜 15 度。

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

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

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

來看看效果圖：

css中的animation

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

語法：

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

name：指定動畫的名稱，通過 @keyframes 規(guī)則來定義。
duration：動畫的持續(xù)時間，以秒（s）或毫秒（ms）為單位。
timing-function：動畫的速度曲線，與 transition 中的類似，如 linear、ease 等。
delay：動畫開始前的延遲時間。
iteration-count：動畫的播放次數(shù)，可以是具體數(shù)字、infinite（無限次）。
direction：動畫的播放方向，可選值有 normal（默認，正向播放）、reverse（反向播放）、alternate（交替播放，先正向后反向）、alternate-reverse（交替播放，先反向后正向）。
fill-mode：規(guī)定動畫在執(zhí)行前后的樣式，可選值有 none（默認，動畫結束后回到初始狀態(tài)）、forwards（動畫結束后保持最后一幀的樣式）、backwards（在動畫延遲期間應用動畫的第一幀樣式）、both（向前和向后填充模式都應用）。

@keyframes 規(guī)則

通過 @keyframes 來定義動畫的關鍵幀。

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

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

OK，那我們再創(chuàng)建一個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內置組件

在 Vue 中，transition 是一個內置組件，用于在元素或組件進入和離開 DOM 時應用動畫效果。它可以將進入和離開動畫應用到通過默認插槽傳遞給它的元素或組件上。

transition 組件的一些特點和用法如下：

觸發(fā)條件：可以由 v-if 或 v-show 所觸發(fā)的切換、動態(tài)組件的切換、組件根節(jié)點的切換或特殊元素切換的動態(tài)組件觸發(fā)。
CSS 過渡類：transition 組件會自動檢測目標元素是否應用了 CSS 過渡或動畫，并在適當?shù)臅r機 添加和移除 相應的 CSS 過渡類。這些過渡類包括 v-enter-from、v-enter-active、v-enter-to、v-leave-from、v-leave-active 和 v-leave-to，用于定義進入和離開動畫的不同階段。
- 修改template部分：

添加css樣式：

效果圖：

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

添加css樣式：

效果圖：

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

修改template部分：

添加css樣式（注意這里還調用了animation.css樣式組件中的css）：

效果圖：

當然，還有其他的用法，例如：

自定義過渡類：可以向組件傳遞 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 組件和相關的過渡類、鉤子函數(shù)，可以實現(xiàn)各種豐富的動畫效果，提升用戶體驗。同時，可以結合 CSS 過渡和動畫來進一步增強動畫的表現(xiàn)力。

第三方庫Animate.css

在 Vue 項目中使用 animation.css 庫，您可以按照以下步驟進行操作：

安裝 animation.css 庫：您可以使用 npm 或 yarn 來安裝。
- 使用 npm ：npm install animation.css
- 使用 yarn ：yarn add animation.css
在 Vue 組件中引入 animation.css 樣式文件。在main.js中引入

然后組件的模板中，為需要添加動畫的元素添加相應的類名。animation.css 提供了很多預定義的動畫類名，我們可以根據(jù)需要選擇。我們可以在Animate.css文檔中進行挑選，并查看如何使用。
引入 Animate.css 后，將類animate__animated與任何動畫名稱一起添加到元素（不要忘記animate__前綴?。?/p>
- 修改template部分：