欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中實(shí)現(xiàn)動(dòng)畫效果的多種方法小結(jié)

 更新時(shí)間：2024年07月17日 09:21:52   作者：常樂(lè)hhh  
平時(shí)我們能在網(wǎng)頁(yè)上看到很多動(dòng)畫效果,這些效果看起來(lái)就很引人注目,我們是不是也可以在自己的項(xiàng)目中添加一些動(dòng)畫效果,讓我們的頁(yè)面看起來(lái)更加的高端大氣上檔次,博人眼球,所以本文給大家介紹了Vue中實(shí)現(xiàn)動(dòng)畫效果的多種方法,需要的朋友可以參考下

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

前戲準(zhǔn)備

  • 先創(chuàng)建一個(gè)Vue項(xiàng)目，并將一些html和css樣式先寫好
  • 設(shè)計(jì)一個(gè)小卡片，點(diǎn)擊按鈕就可以出現(xiàn)一個(gè)emoji
  • 然后通過(guò)添加動(dòng)畫效果，來(lái)修飾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">請(qǐng)按這里</button>
      </div>

    </div>
  </div>
  • script setup部分：
import {ref} from 'vue'

const name ='Vue動(dòng)畫'
const isActive =ref(true)
  • style lang="css" scoped部分：為了更好的演示，我將不需要更改的css樣式打包起來(lái)，避免代碼太亂了，不好修改。
@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)頁(yè)元素的樣式變化添加動(dòng)畫效果。那他們?cè)撛趺从媚兀?/p>

transition

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

語(yǔ)法：transition: property duration timing-function delay;

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

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

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

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

transform

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

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

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

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

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

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

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

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

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

來(lái)看看效果圖：

css中的animation

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

語(yǔ)法：

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

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

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

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

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

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

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

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

@keyframes 規(guī)則

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

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

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

.pulse{
    animation-name:pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
/* css 性能優(yōu)化  scale3d() GPU加速  動(dòng)畫不要影響周圍的文檔流（圖層）*/
@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部分修改代碼

來(lái)看看效果圖：

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

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

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

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

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

    • 修改template部分：

  • 添加css樣式：

  • 效果圖：

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

  • 添加css樣式：

  • 效果圖：

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

  • 修改template部分：

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

  • 效果圖：

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

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

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

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

第三方庫(kù)Animate.css

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

  • 安裝 animation.css 庫(kù)：您可以使用 npm 或 yarn 來(lái)安裝。

    • 使用 npm ：npm install animation.css

    • 使用 yarn ：yarn add animation.css

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

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

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

    • 修改template部分：

  • 效果圖：

結(jié)語(yǔ)

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

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

相關(guān)文章

最新評(píng)論