我想等待指定元素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;
}
把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);
}
}
你用v-show试试
vue不是自带过渡吗,为何不用?
transition
可以在组件里面设置动画的时间,三种过渡状态,过渡前,过度中,过渡后
参考
https://www.jianshu.com/p/808d08acb4f2
你这个不是动画,是过渡,可以自行百度一下触发过渡的方式至于怎么写动画,已经有人给你回答过了,你可以参考他的