Vue2.0 Transition 用法 css 过度动画 动画过度状态 钩子函数

元素设置

  show // 点击触发
  
    
hello
  

CSS设置

• v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
• v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在transition/animation完成之后移除。

• v-leave:定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
• v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在transition/animation完成之后移除。

.v-enter,
.v-leave-to {
  filter: alpha(opacity=0);
  opacity: 0;
  -moz-opacity: 0;
  -o-opacity: 0;
  -webkit-opacity: 0;
  transform: scale(2, 2);
  -webkit-transform: scale(2, 2);
  -moz-transform: scale(2, 2);
  -o-transform: scale(2, 2);
}
.v-enter-active,
.v-leave-active {
  transition: all 0.4s ease;
}

自定义过渡类名

上面的四个过渡类名都是根据transition的name属性自动生成的。

可以通过

enter-class

enter-active-class

leave-class

leave-active-class

这四个特性来定义。

  show
  
    
hello
  

上面代码中，原来默认的fade-enter类对应fade-in-enter，fade-enter-active类对应fade-in-active，依次类推。

 

JavaScript钩子函数

除了用CSS过渡的动画来实现vue的组件过渡，还可以用JavaScript的钩子函数来实现，在钩子函数中直接操作DOM。我们可以在属性中声明以下钩子：

 

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) {
    // ...
  }
}