vue怎么等待指定元素加载完成后执行动画

Question

我想等待指定元素v-if加载完成后，执行动画，但是我这样写动画并不生效，元素是直接出现，没有过渡的效果，应该怎么写呢？
除了加settimeout之外，有什么办法

```html
<view class="delete-box" v-if="isManagement"
          :class="isEnter?'enter':''"
          >

```javascript
changeManagement(){
                this.isManagement = !this.isManagement
                this.$nextTick(()=>{
                    this.isEnter = !this.isEnter
                })
}

watch监听变化也不行

watch:{
            isManagement:{
                 handler(newval, oldval) {
                           this.$nextTick(()=>{
                               this.isEnter = newval
                           })
                        }

            }
        },

.delete-box{
                        position: absolute;
                        right: 0;
                        vertical-align: top;
                        display: inline-block;
                        width: 50rpx;
                        height: 40rpx;

                    }
                    .enter{
                        transform: translateX(-200rpx);
                        transition: all .5s;
                    }

Answer 1

把transition: all .5s;放到delete-box里面试试

...不使用settimeout

写个动画吧

.enter {
    animation-name: moveLeft;
    animation-duration: .5s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}
@keyframes moveLeft {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(-200px);
    }
}