php方块从左到右移动,vue transition 过渡动画 从左向右进入，从右向左进入

弹窗从右向左进入

.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%);

}

弹窗从左向右进入

.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%);

}

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

.rotating {

position: absolute;

top: 0;

left: 58px;

height: 100%;

width: 300px;

z-index: 998;

/*transform: translateX(0%);*/ //加了这个属性 过渡动画会失效

transition: all 0.3s;

background-color: #041a2e;

}