自学的菜鸟 2022-06-28 16:48 采纳率: 61.6%
浏览 192
已结题

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

我想等待指定元素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;
                    }

  • 写回答

4条回答 默认 最新

  • 林一怂儿 前端领域新星创作者 2022-06-28 17:30
    关注

    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);
        }
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 7月6日
  • 已采纳回答 6月28日
  • 修改了问题 6月28日
  • 修改了问题 6月28日
  • 展开全部

悬赏问题

  • ¥15 Bibtex4Word 引用中文文献
  • ¥20 用opencv c/c++ 转换成灰度图,然后做一下直方图均衡,输出mp4文件
  • ¥20 matlab中的双层数值积分
  • ¥50 服务器打印水晶报表问题
  • ¥30 gradle环境下javafx项目如何使用druid连接池
  • ¥15 服务器打印水晶报表问题
  • ¥18 深度学习tensorflow1,ssdv1,coco数据集训练一个模型
  • ¥100 关于注册表摄像头和麦克风的问题
  • ¥30 代码本地运行正常,但是TOMCAT部署时闪退
  • ¥15 关于#python#的问题