vue2.0动画效果transiton使用

 
 

  
  编辑于２０１７．１２．１６－加油！
 
 
 
 

  
  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这几个钩子函数就可以了。