vue-transition-过渡动画-从左向右进入从右向左进入

弹窗从右向左进入

<transition name="moveR"></transition><style lang="scss">  .moveR-enter-active,  .moveR-leave-active {    transition: all 0.3s linear;    transform: translateX(0);  }   .moveR-enter,  .moveR-leave {    transform: translateX(100%);  }   .moveR-leave-to{     transform: translateX(100%);   }</style>

弹窗从左向右进入

<transition name="moveL"></transition><style lang="scss">     .moveL-enter-active,     .moveL-leave-active {         transition: all 0.3s linear;         transform: translateX(0%);     }    .moveL-enter,    .moveL-leave {        transform: translateX(-100%);    }    .moveL-leave-to {        transform: translateX(-100%);    }</style>

注意：在根节点的样式里不要加transform：translateX()属性，否则过渡会失效。例：

<template>    <transition name="moveL">        <div class="rotating" v-if="rotatShowStatus">        </div>    </transition></template><style lang="scss">.rotating {        position: absolute;        top: 0;        left: 58px;        height: 100%;        width: 300px;        z-index: 998;        /*transform: translateX(0%);*/ //加了这个属性 过渡动画会失效        transition: all 0.3s;        background-color: #041a2e;        }</style>