transition

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)