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

Question

vue 的过度动画通过添加 transition 特性，在元素插入删除或者隐藏显示时会被触发， 但是如果我只是想在某项操作后，触发一个元素的 vue 动画该如何实现呢？？

 <div v-if="editShow" transition="slide-edit-box">

    <slot></slot>

    <!-- 编辑区域，插入其他编辑组件 -->

</div>

<btn>click</btn>

比如上面的代码，slide-edit-box 的动画会在 editShow 改变时触发，但是我现在想在点击 btn 的时候触发动画效果

Answer 1

可以按普通的css3动画思路来实现。将transition属性和初始css动画属性定义在一个常驻class上，比如.slide-edit-box。然后把动画触发之后的css属性定义在一个新的临时class上，比如.slide-edit-box-anime。然后给btn绑定一个给动画dom添加class的方法就可以了。data&nbsp;()&nbsp;{&nbsp;&nbsp;return&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;class:&nbsp;'' &nbsp;&nbsp;} }, methods:&nbsp;{ &nbsp;&nbsp;anime&nbsp;()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;this.class&nbsp;=&nbsp;'slide-edit-box-anime' &nbsp;&nbsp;} }