Vue的过渡&动画效果-transition

我不是女神ヾ 2022-09-01 08:12 247阅读 0赞

![20210727104234223.gif][]

/* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .fade-enter-active, .fade-leave-active {
    	transition: opacity 2s
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
    	opacity: 0
    }
    /* 方式一 */
    .p1-enter-active{
      animation: show 0.5s linear;
    }
    .p1-leave-active{
      animation: show 0.5s linear reverse;
    }
    
    @keyframes show {
      from{
    	transform: translateX(-100%);
      }
      to{
    	transform: translateX(0px);
      }
    }
    
    /* 方式二 */
    /* 进入的起点、离开的终点 */
    .p2-enter,.p2-leave-to{
      transform: translateX(-100%);
    }
    .p2-enter-active,.p2-leave-active{
      transition: 1s linear;
    }
    /* 进入的终点、离开的起点 */
    .p2-enter-to,.p2-leave{
      transform: translateX(0px);
    }

<div id = "app">
    <button v-on:click = "show = !show">点我</button>
    	
        <transition-group 
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__bounce"
          leave-active-class="animate__backOutDown"
        >
          <p v-show="!show" key="1">animate1</p>
          <p v-show="show" key="2">animate2</p>
        </transition-group>
    	<transition name = "fade">
    		<p v-show = "show" v-bind:style = "styleobj">动画实例</p>
    	</transition>
    		<transition name = "p1">
    		<p v-show = "show" v-bind:style = "styleobj">动画实例</p>
    	</transition>
    		<transition name = "p2">
    		<p v-show = "show" v-bind:style = "styleobj">动画实例</p>
    	</transition>
    	
    </div>
    
    // -------------------
    new Vue({
    el: '#app',
        data: {
            show:true,
            styleobj :{
                fontSize:'30px',
                color:'red'
            }
        },
        methods : {
        }
    });

[20210727104234223.gif]: /images/20220829/3ccd2874d145423792b6e8225eabfc02.png