javascript - vue的 过渡动画 可以不通过 show if 触发吗？ 怎么做呢？？

<section class="modal-wrap" v-if="showWrap" v-bind:class="show?'active':''">
    <p class="yo-modal ani" @click.self="close"></p>
    <slot></slot>
</section>

类似父元素和子元素进行动画，父元素必须等待子元素进行动画结束后才可以消失，使用Vue2.0因为props不再支持双向绑定，如果再使用transition会很难操作，最后直接通过操作class结合watch实现

使用Class 与 Style 绑定

其实vue的transition配合animate.css效果更佳

可参考下面的例子，没有使用transition。

https://jsfiddle.net/xiaoluob...

可以按普通的css3动画思路来实现。

将transition属性和初始css动画属性定义在一个常驻class上，比如.slide-edit-box。
然后把动画触发之后的css属性定义在一个新的临时class上，比如.slide-edit-box-anime。

然后给btn绑定一个给动画dom添加class的方法就可以了。

data () {
  return {
    class: ''
  }
},
methods: {
  anime () {
    this.class = 'slide-edit-box-anime'
  }
}