vue2.0动画效果transiton使用

水深无声 2021-10-09 03:32 263阅读 0赞

编辑于２０１７．１２．１６－加油！
     
      
     
      
      
       transition使用应放在需要移动的div外面<transition></transition>，而不再是放在<div transition="move">.
     
      
     
      
      
       使用方法：--例子是购物车的减号按钮的渐变移出的效果（平移）
     
      
     
      
      
       <transition name="move">　　先起个名move,下面的样式就是&.move-leave,move-enter,样式的类名会自动添加到元素上     <div class="cart-decrease" v-show="food.count > 0" @click.stop="desNum()" >     <span class="inner">     <i class="fa fa-minus-square "></i>     </span>     </div> </transition> 
     
      
     
      
      
       move-enter：进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除； move-enter-active：进入过渡的结束状态，元素被插入时就生效，在过渡过程完成之后移除； move-leave：离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除； move-leave-active：离开过渡的结束状态，元素被删除时生效，离开过渡完成之后被删除 
     
      
     
      
      
       　
     
      
     
      
      
       .cart-decrease, .cart-add display:inline-block　　　　要为inline-block vertical-align: center line-height: 24px font-size:24px float: left transition: all 0.5s linear　　　　　设置外层div的变化：所有元素，０．５秒，线性变化 &.move-transition　　　　　　　　　　　初始状态 opacity: 1 transform: translate3D(0, 0, 0) .inner display: inline-block
     
      
     
      
      
       　　　　　　　　　　　　　　　　　　　transform: rotate(0) 内层的可以设置旋转 &.move-enter, &.move-leave　　　　动画移入和移出时候的样式 opacity: 0 transform: translate3D(24px, 0, 0) 
     
      
     
      
      
       　　　　　　　　　　　　　　 .inner
     
      
     
      
      
       transform: rotate(180deg)　　内层的可以设置旋转
     
      
     
      
      
       
     
      
     
      
      
       
     
      
     
      
    
     
      
     
      
    
     
      
     以下参考内容来自：https://segmentfault.com/q/1010000007738500 自定义过渡类名 上面的四个过渡类名都是根据transition的name属性自动生成的，那么能否自己定义这四个类名呢？答案是可以的，通过enter-class、enter-active-class、leave-class、leave-active-class这四个特性来定义。
     
      
      
       
     
      <div>
      <button @click="show=!show">show</button>
      <transition name="fade" enter-class="fade-in-enter" enter-active-class="fade-in-active" leave-class="fade-out-enter" leave-active-class="fade-out-active" >
        <p v-show="show">hello</p>
      </transition>
    </div> &.fade-in-active, &.fade-out-active
      transition: all 0.5s ease     
    &.fade-in-enter, &.fade-out-active
      opacity: 0 
     JavaScript钩子函数 除了用CSS过渡的动画来实现vue的组件过渡，还可以用JavaScript的钩子函数来实现，在钩子函数中直接操作DOM。我们可以在属性中声明以下钩子： <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" >
    </transition> methods: {
      // 过渡进入
      // 设置过渡进入之前的组件状态
      beforeEnter: function (el) {
        // ...
      },
      // 设置过渡进入完成时的组件状态
      enter: function (el, done) {
        // ...
        done()
      },
      // 设置过渡进入完成之后的组件状态
      afterEnter: function (el) {
        // ...
      },
      enterCancelled: function (el) {
        // ...
      },
      // 过渡离开
      // 设置过渡离开之前的组件状态
      beforeLeave: function (el) {
        // ...
      },
      // 设置过渡离开完成时地组件状态
      leave: function (el, done) {
        // ...
        done()
      },
      // 设置过渡离开完成之后的组件状态
      afterLeave: function (el) {
        // ...
      },
      // leaveCancelled 只用于 v-show 中
      leaveCancelled: function (el) {
        // ...
      }
    } 上面的钩子函数中可以进行任何你想做的DOM操作。 
    小技巧：如果你只想设置组件过渡进入的效果而不想有组件过渡离开的效果，这时你就可以用钩子函数，只设置beforeEnter、enter、afterEnter这几个钩子函数就可以了。