Vue3의 요소와 구성 요소 간에 애니메이션을 전환하는 방법-View.js-php.cn

Vue3의 요소와 구성 요소 간에 애니메이션을 전환하는 방법

PHPz

풀어 주다： 2023-05-14 14:16:11

앞으로

909명이 탐색했습니다.

분석 예시

요소 간 애니메이션 전환

요소 간 애니메이션 전환은 두 개의 dom 요소 간 전환을 의미합니다. 예를 들어 div가 사라지고 다른 요소가 div가 표시됩니다. 소멸은 페이드 아웃 효과에 해당하고 표시는 페이드 인 효과에 해당합니다. 이 예에서는 두 개의 div를 사용하고 하나는 hello world, 다른 하나는 bye world를 표시한 다음 버튼을 사용하여 애니메이션 전환을 제어합니다. dom元素之间的切换，比如一个div消失，另一个div显示，消失对应着渐出的效果，显示对应渐入的效果，本例我们以两个div，一个显示hello world,另一个显示bye world,然后使用一个按钮控制动画的切换，代码如下：

<!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>
        .v-enter-from{
            opacity: 0;
        }
        .v-enter-active{
            transition: opacity 1s ease-in;
        }
        .v-enter-to{
            opacity: 1;
        } 
        .v-leave-from{
            opacity: 1;
        }
        .v-leave-active{
            transition:opacity 1s ease-in
        }
        .v-leave-to{
            opacity: 0;
        }
    </style>
    <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;
            }
        },
        template: 
        `
        <transition mode="out-in" appear>
            <div v-if="show">hello world </div>
            <div v-else="show" >bye world </div>
        </transition>
        <button @click="handleClick">switch</button>
        `
    });
    const vm = app.mount(&#39;#root&#39;);
</script>

로그인 후 복사

如上面的代码所示，我们使用CSS定义好渐入和渐出的效果，然后将我们要做动画的div放到<transition></transition>标签之间，使用一个Boolean变量show控制元素的显示和隐藏，当我们点击按钮的时候，执行handleClick函数，将show变量取反，达到切换的效果。在代码中我们还看到了在transition标签上使用了一个mode="out-in",这个mode的取值其实还有一个是mode="in-out",两者的区别如下：

mode="out-in": 表示两个元素切换的时候，当前的元素先消失，待显示的元素再显示 mode="in-out"

<!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>
        .v-enter-from{
            opacity: 0;
        }
        .v-enter-active{
            transition: opacity 1s ease-in;
        }
        .v-enter-to{
            opacity: 1;
        } 
        .v-leave-from{
            opacity: 1;
        }
        .v-leave-active{
            transition:opacity 1s ease-in
        }
        .v-leave-to{
            opacity: 0;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    // 多个单组件之间的动画
    const ComponentA = {
        template:&#39;<div>hello world</div>&#39;
    }
    const ComponentB = {
        template:&#39;<div>bye world</div>&#39;
    }
 const app = Vue.createApp({
        data() {
            return {
               component:&#39;component-a&#39;
            }
        },
        methods: {
            handleClick(){
               if(this.component === &#39;component-a&#39;){
                this.component = &#39;component-b&#39;;
               }else{
                this.component = &#39;component-a&#39;;
               }
            }
        },
        components:{
            &#39;component-a&#39;:ComponentA,
            &#39;component-b&#39;:ComponentB
        },
        // 动态组件的方式
        template: 
        `
        <transition mode="out-in" appear>
            <component :is="component" />
        </transition>
        <button @click="handleClick">switch</button>
        `
    });
    const vm = app.mount(&#39;#root&#39;);
</script>

로그인 후 복사

위 코드에서 볼 수 있듯이, CSS를 사용하여 그라데이션 및 페이드 아웃 효과를 정의한 다음 Boolean code>변수 <code>show는 버튼을 클릭하면 handleClick 함수가 실행되고 show가 요소의 표시 및 숨기기를 제어합니다. 변수는 전환 효과를 얻기 위해 반전됩니다. 코드에서 mode="out-in"이 전환 태그에 사용되는 것을 볼 수 있습니다. 이 mode의 값은 실제로 mode ="입니다. in-out", 둘 사이의 차이점은 다음과 같습니다.

mode="out-in": 두 요소가 전환되면 현재 요소가 먼저 사라지고 그러면 해당 요소가 표시됩니다. mode="in-out": 두 요소가 전환되면 표시할 요소가 먼저 표시되고 현재 요소가 사라집니다. 두 가지 속성을 모두 시도해보고 효과를 확인하면 느낌이 더 깊어질 것입니다

코드에서 속성이 나타나는 것을 볼 수 있습니다. 이 속성은 브라우저에서 인터페이스를 열 때 애니메이션을 실행한다는 의미입니다. 페이지가 로드될 때 애니메이션

컴포넌트 간 애니메이션 전환

Vue에서는 컴포넌트 간 애니메이션 전환도 구현할 수 있습니다. 여기서는 위의 예를 수정하여 동적 컴포넌트 형태로 구현할 수 있습니다. . 위 요소 간 전환에 따른 애니메이션 효과의 코드는 다음과 같습니다. 🎜rrreee

위 내용은 Vue3의 요소와 구성 요소 간에 애니메이션을 전환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!