一般来说，vue动画执行是通过给元素添加类样式实现时，如果执行时间很短，无法清晰的看出当前添加在元素上的类样式，在chrome调试工具中是否有方法能够查看到给当前元素添加的类。

像chrome提供的Animation工具能否查看到当前的类。

目的:引入第三方的UI时，修改其自带的动画。

<!--动画案例-->
<div id="example-1">
  <button @click="show =!show">
    Toggle render
  </button>
  <transition name="slide-fade">
    <p v-if="show">hello</p>
  </transition>
</div>

data () {
    return {
        show: true
    }
}
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}