JavaScript를 사용하여 Vue3에서 애니메이션을 구현하는 방법은 무엇입니까?-View.js-php.cn

JavaScript를 사용하여 Vue3에서 애니메이션을 구현하는 방법은 무엇입니까?

WBOY

풀어 주다： 2023-05-09 23:34:06

앞으로

1157명이 탐색했습니다.

개요

실제로 애니메이션은 CSS뿐만 아니라 js를 사용해도 구현할 수 있습니다. 둘의 차이점은 무엇인가요? CSS는 애니메이션 표시에 더 신경을 써서 성능이 좋은 반면, js 메서드는 성능이 약간 떨어지지만 애니메이션 실행 과정마다 추가 작업을 할 수 있습니다. 즉, 애니메이션 실행의 시작부터 실행까지의 과정을 CSS를 사용하면 기껏해야 애니메이션을 표시하는 것만으로도 애니메이션의 속성을 제어할 수 있습니다. js를 사용하면 애니메이션 실행 시작 부분에서 dom 요소를 조작하고 원하는 효과를 추가할 수 있습니다. 애니메이션 실행이 끝나면 대화 상자를 팝업하는 등 애니메이션을 종료하는 몇 가지 작업을 수행할 수 있습니다. js를 사용하여 구현하는 것이 더 편리합니다.

분석 예

효과를 얻고 싶다고 가정해 보겠습니다. "hello world"의 글꼴 색상이 1초에 한 번씩 빨간색과 녹색으로 바뀌고, 5초 후에 종료되고, 종료 후 대화 상자가 팝업되고,

<!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>使用JS实现动画</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
 const app = Vue.createApp({
        data() {
            return {
                show:false
            }
        },
        methods: {
            handleClick(){
                this.show = !this.show;
            },
            handleBeforeEnter(el){
                el.style.color = &#39;red&#39;;
            },
            handleEnterActive(el, done){
             const animation = setInterval(() => {
                    const color = el.style.color;
                    if(color === &#39;red&#39;){
                        el.style.color = &#39;green&#39;;
                    }else{
                        el.style.color  = &#39;red&#39;;
                    }
                },1000);
                setTimeout(() =>{
                    clearInterval(animation);
                    done();// 通知下一个函数的执行
                },5000);
            },
            handleEnterEnd(){
                alert(123);
            }
        },
        template: 
        `
        	<transition
        		:css="false"
       		 @before-enter="handleBeforeEnter"
             @enter="handleEnterActive"
             @after-enter="handleEnterEnd">
              <div v-if="show" >hello world </div>
          </transition>
          <button @click="handleClick">switch</button>
        `
    });
    const vm = app.mount(&#39;#root&#39;);
</script>
</html>

로그인 후 복사

위 코드에서 전환 태그에서 :css = "false"를 사용하는 것을 볼 수 있습니다. 이는 애니메이션에 js를 사용하기를 원하기 때문입니다. 먼저 CSS를 비활성화한 다음 @before-enter="handleBeforeEnter", @enter="handleEnterActive" 및 @after-enter를 구현해야 합니다. 시작하기 전에 애니메이션이 실행되고 애니메이션이 종료됩니다. handleBeforeEnter, handleEnterActive, handleEnterEnd< /code>는 세 가지 단계에 해당하는 js이며, 이러한 함수에서 수행하려는 작업을 수행할 수 있습니다. 이 예에서는 :css = "false" 这是因为我们要使用js做动画，所以要先禁用掉css，然后分别实现了@before-enter="handleBeforeEnter", @enter="handleEnterActive" ,@after-enter 分别对应动画开始前，动画执行中，动画执行结束，而后面的handleBeforeEnter,handleEnterActive,handleEnterEnd三个函数是对应三个阶段的js函数，我们可以在这几个函数中执行我们想要执行的操作。在本例中：

handleBeforeEnter(el)
{
   el.style.color = &#39;red&#39;;
}

로그인 후 복사

动画执行前我们将文本的颜色设置成红色

当动画执行的时候

handleEnterActive(el, done){
             const animation = setInterval(() => {
                    const color = el.style.color;
                    if(color === &#39;red&#39;){
                        el.style.color = &#39;green&#39;;
                    }else{
                        el.style.color  = &#39;red&#39;;
                    }
                },1000);
                setTimeout(() =>{
                    clearInterval(animation);
                    done();// 通知下一个函数的执行
                },5000);
            }

로그인 후 복사

动画执行的时候，我们隔1秒去判断当前文本的颜色，如果是红色，则改成绿色，如果是绿色则改成红色，然后持续5秒结束。

当动画结束的时候

handleEnterEnd(){
     alert(123);
}

로그인 후 복사

动画结束后，会执行handleEnterEndrrreee

애니메이션이 실행되기 전에 텍스트 색상을 빨간색으로 설정했습니다.🎜🎜애니메이션이 실행될 때🎜rrreee🎜애니메이션이 실행될 때 1초마다 현재 텍스트의 색상이 결정됩니다. 빨간색이면 녹색으로 변경하고, 녹색이면 빨간색으로 변경한 후 5초간 계속합니다. 🎜🎜애니메이션이 끝나면🎜rrreee🎜애니메이션이 끝난 후 handleEnterEnd가 실행되고 대화상자가 뜨면서 123이 나옵니다.🎜위 내용은 JavaScript를 사용하여 Vue3에서 애니메이션을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!