当前位置: 首页 > Web前端 > CSS

vuetransition过渡动画从左到右,从右到左

时间:2023-03-31 13:23:29 CSS

.moveR-enter-active,.moveR-leave-active{transition:all0.3slinear;转换:translateX(0);}.moveR-enter,.moveR-leave{转换:translateX(100%);}.moveR-leave-to{转换:translateX(100%);}弹窗从右向左进入.moveR-enter-active,.moveR-leave-active{transition:all0.3slinear;转换:translateX(0);}.moveR-enter,.moveR-leave{转换:translateX(100%);}.moveR-leave-to{转换:translateX(100%);}从左到右弹出窗口.moveL-enter-active,.moveL-leave-active{transition:all0.3s线性的;转换:translateX(0%);}.moveL-enter,.moveL-leave{变换:translateX(-100%);}.moveL-leave-to{转换:translateX(-100%);}注意:根节点的样式不要加上transform:translateX()属性,否则会过渡失败。示例:.rotating{宝位置:绝对;顶部:0;左:58px;高度:100%;宽度:300px;z-指数:998;/*transform:translateX(0%);*///添加这个属性的transition动画会失效transition:all0.3s;背景色:#041a2e;