Vue3 목록 애니메이션 및 상태 애니메이션 적용 방법-View.js-php.cn

Vue3 목록 애니메이션 및 상태 애니메이션 적용 방법

王林

풀어 주다： 2023-05-22 09:43:19

앞으로

1363명이 탐색했습니다.

개요

목록 애니메이션과 상태 애니메이션은 모두 사용자 경험을 향상시키는 방법입니다. 목록에서 데이터를 추가하거나 제거할 때 직접 추가하여 갑자기 표시하면 약간 갑작스러워지고 사용자는 데이터가 추가되고 목록에서 데이터가 제거되면 사용자는 어떤 데이터가 제거되었는지 알 수 없습니다. 흥미로운 애니메이션은 매우 매력적이며 사용자가 새로운 데이터와 제거된 데이터에 주의를 기울이는 데 도움이 되므로 애니메이션을 추가하면 사용자 경험이 향상될 수 있습니다. 이것이 목록 애니메이션이고, 상태 애니메이션은 한 상태에서 다른 상태로 바뀌는 것을 말합니다. 직접적으로 바꾸면 딱딱해 보일 수 있지만, 천천히 전환되도록 애니메이션을 추가하면 훨씬 나아질 것입니다.

예제 분석

목록 애니메이션

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 템플릿에서 숫자 목록이 표시됩니다. 가장 중요한 것은 <transition-group> 태그를 사용하여 애니메이션하려는 부분을 래핑한다는 것입니다. 버튼을 클릭하면 js 함수가 실행되어 목록 길이에 1을 더한 숫자를 목록에 추가합니다. 독자들은 이를 실행하여 애니메이션 효과를 볼 수 있다.

상태 애니메이션

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!