transition

我会带着你远行 2023-07-18 14:05 12阅读 0赞

# transition中的四个属性 #

**transition-property：** 规定设置过渡效果的 CSS 属性的名称。  
**transition-duration：** 规定完成过渡效果需要多少秒或毫秒。  
**transition-timing-function：** 规定过渡效果的速度曲线  
**transition-delay：** 定义过渡效果何时开始  
默认值all 0 ease 0

JavaScript 语法：object.style.transition=“width 2s”

# vue的transition的name作用 #

*  使用name去选择哪种过渡效果，name 的值是用来替换 v-enter 的 v，例如：代码中的slide-right代表选择slide-left-enter
 *  transition 只有 name 这一个属性，且只有一个子元素，这个子元素需要 v-if 或 v-show 来控制是否显示
 *  v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除
 *  v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在transition/animation完成之后移除
 *  v-leave:定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除
 *  v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在transition/animation完成之后移除

//1.使用过渡效果，首先要用transition包裹要处理的内容
     <transition :name="transitionName">
            <router-view class="Router"></router-view>
          </transition>
    
    
    
     export default { 
          data () { 
            return { 
            //2.使用name去选择哪种过渡效果，name 的值是用来替换 v-enter 的 v，例如：代码中的slide-right代表选择slide-left-enter
              transitionName:'slide-right'
              }
             }
            }
    
    
    
    //3.设置各种过渡样式
    .slide-left-enter,.slide-right-leave-active
             
            opacity 0  /* 注释位置独占一行，结果切换页面时两个页面重合，opacity 0：完全透明 1：完 全不透明 */
           
            -webkit-transform translate(100%,0)  /* transform translate(100%,0)从元素的当前位置延x轴方向，向右移动整个元素宽度 */
            transform translate(100%,0)
            
    .slide-left-leave-active,.slide-right-enter
            opacity 0
            -webkit-transform translate(-100%,0)
            transform translate(-100%,0)