Vue3列表動畫和狀態動畫怎麼應用-Vue.js-PHP中文網

首頁

web前端

Vue.js

Vue3列表動畫和狀態動畫怎麼應用

王林

May 22, 2023 am 09:43 AM

概述

清單動畫和狀態動畫都是增加使用者體驗的方法，當一個清單新增資料或移除資料時，如果直接加入，突然顯示，未免有些突兀，而且使用者可能會不知道此時已經有資料加入了，從清單中移除資料也是，使用者很有可能不知道目前已經移除了哪一條資料。有趣的動畫具有很好的吸引力，可以幫助使用者專注於新增和移除的數據，因此，加上動畫能夠改善使用者體驗。這就是清單動畫，而狀態動畫是指從一個狀態到另一個狀態的變化，如果直接變過去，就會顯得比較生硬，但是如果是加了動畫慢慢過渡過去會好很多。

範例解析

清單動畫

Vue3列表動畫和狀態動畫怎麼應用

#如上圖所示我們要展示一個數字構成的清單,右面有一個按鈕，點擊按鈕會執行一個動畫增加數字。程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表动画</title>
    <style>
        .list-item{
            display: inline-block;
            margin-right: 10px;
        }
        .v-enter-from{
            opacity: 0;
            transform: translateY(30px);
        }
        .v-enter-active{
            transition: all 1s ease-in;
        }
        .v-enter-to{
            opacity: 1;
            transform: translateY(0px);
        }
        .v-move{
            transition: 2.5s ease-in;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
 const app = Vue.createApp({
        data() {
            return {
               list:[1,2,3]
            }
        },
        methods: {
            handleClick(){
               this.list.unshift(this.list.length+1);
            }
        },
        template: 
        `
            <div>
                <transition-group>
                <span class="list-item" v-for = "item in list" :key="item">{{item}}</span>
                </transition-group>
                <button @click="handleClick">add</button> 
            </div>
        `
    });
    const vm = app.mount(&#39;#root&#39;);
</script>

我們先是使用CSS將清單的動畫效果定義出來，這個效果和之前講的動畫定義差不多，這裡不過多贅述，定義好動畫後，我們在Vue的template中使用一個span將我們的數字清單顯示出來，然後最關鍵的是我們要使用<transition-group></transition-group>標籤將我們要做動畫的部分包裝起來。當我們點擊按鈕的時候，執行js函數往列表中新增一個列表長度加一的數。動畫效果讀者可以，運行查看。

狀態動畫

Vue3列表動畫和狀態動畫怎麼應用

狀態動畫比較簡單，就是從一個狀態到另一個狀態中間加上一些過渡的值，主要是透過資料控制內容的展示，例如從1變到10，如果直接1馬上變成10，則顯得很生硬，但是中間加一寫其他數字，比如2，3，4...最後再變成10就會好很多，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>状态动画</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    // 状态动画：通过数据控制内容的展示
 const app = Vue.createApp({
        data() {
            return {
               number:1,
               animateNumber: 1
            }
        },
        methods: {
            handleClick(){
                this.number =10;
                if(this.animateNumber<this.number){
                const animation =  setInterval(()=>{
                this.animateNumber += 1;
                    if(this.animateNumber === 10){
                    clearInterval(animation)
                     }
               },100);
               }
            }
        },
        template: 
        `
            <div>
                <div>{{animateNumber}}</div>
                <button @click="handleClick">do</button>  
            </div>
        `
    });
    const vm = app.mount(&#39;#root&#39;);
</script>

列表動畫比較簡單，我們點擊執行按鈕的時候，使用js函數每隔100 毫秒就去修改一下目前顯示的值，直到值變成最終想要狀態的值就停止。

以上是Vue3列表動畫和狀態動畫怎麼應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：亿速云。如有侵權，請聯絡admin@php.cn刪除

反應，vue和Netflix前端的未來Apr 12, 2025 am 12:12 AM

Netflix主要使用React作為前端框架，輔以Vue用於特定功能。 1)React的組件化和虛擬DOM提升了Netflix應用的性能和開發效率。 2)Vue在Netflix的內部工具和小型項目中應用，其靈活性和易用性是關鍵。

前端中的vue.js：現實世界的應用程序和示例Apr 11, 2025 am 12:12 AM

Vue.js是一種漸進式JavaScript框架，適用於構建複雜的用戶界面。 1)其核心概念包括響應式數據、組件化和虛擬DOM。 2)實際應用中，可以通過構建Todo應用和集成VueRouter來展示其功能。 3)調試時，建議使用VueDevtools和console.log。 4)性能優化可通過v-if/v-show、列表渲染優化和異步加載組件等實現。

vue.js和React：了解關鍵差異Apr 10, 2025 am 09:26 AM

Vue.js適合小型到中型項目，而React更適用於大型、複雜應用。 1.Vue.js的響應式系統通過依賴追踪自動更新DOM，易於管理數據變化。 2.React採用單向數據流，數據從父組件流向子組件，提供明確的數據流向和易於調試的結構。

vue.js vs.反應：特定於項目的考慮因素Apr 09, 2025 am 12:01 AM

Vue.js適合中小型項目和快速迭代，React適用於大型複雜應用。 1)Vue.js易於上手，適用於團隊經驗不足或項目規模較小的情況。 2)React的生態系統更豐富，適合有高性能需求和復雜功能需求的項目。

vue怎麼a標籤跳轉Apr 08, 2025 am 09:24 AM

實現 Vue 中 a 標籤跳轉的方法包括：HTML 模板中使用 a 標籤指定 href 屬性。使用 Vue 路由的 router-link 組件。使用 JavaScript 的 this.$router.push() 方法。可通過 query 參數傳遞參數，並在 router 選項中配置路由以進行動態跳轉。

vue怎麼實現組件跳轉Apr 08, 2025 am 09:21 AM

Vue 中實現組件跳轉有以下方法：使用 router-link 和 <router-view> 組件進行超鏈接跳轉，指定 :to 屬性為目標路徑。直接使用 <router-view> 組件顯示當前路由渲染的組件。使用 router.push() 和 router.replace() 方法進行程序化導航，前者保存歷史記錄，後者替換當前路由不留記錄。