Loading... > ## 前言 众所周知,这个image加载的过程会导致这个布局进行变化,闪烁,被挤出去或是怎样 虽说最后的界面可能会是我们预期的那样,但是这个过程会让人感到不满(low) 所以有很多办法去解决 , 下面提供一下我个人的解决办法 ## v-show @load 在图片加载完后 会通过@load进行通知,这个时候v-show设置成true即可 ## opacity 一开始将不透明度设置成0 , 等load后设置成1即可 ## css 先讲一下v-if跟v-show的区别, 前者是false的时候 没有该元素,后者是false的时候 该元素的display为none 也就是隐藏起来了 同理 定义俩 class, 这样就跟v-show一样的效果了 ```js :class="{'before':isShow,'after':!isShow}" ``` ```css .before{ display:none; } .after{ display:unset; } ``` 但是这样不就没意义了吗,v-show就好了,所以可以在`.after`中加点过度效果,让其显示的时候平滑柔顺一些,例如添加animation transform等行为 最后修改:2021 年 10 月 28 日 © 允许规范转载 打赏 赞赏作者 微信 赞 5 如果觉得我的文章对你有用,请随意赞赏