图片加了改变宽高的动画以后 就无法正确计算宽高比
BaseCloud
- 发布：2020-10-22 15:24
- 更新：2021-03-16 11:11
- 阅读：687
产品分类： uniapp/H5
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win7
HBuilderX类型： 正式
HBuilderX版本号： 2.9.3
浏览器平台： Chrome
浏览器版本： 78.0.3904.97
项目创建方式： HBuilderX
操作步骤：
预期结果：
正确计算宽高
正确计算宽高
实际结果：
图片变形
图片变形
bug描述：
给image属性设置了 mode='widthFix' ，同时添加一个动画效果的样式类，此时渲染后image的宽高计算错误。
<image src="./static/airship.png" mode="widthFix" class="w80 animated infinite splashOut"></image>
@-webkit-keyframes splashOut {
from {
opacity: 1;
transform: scaleX(0);
}
to {
opacity: 0 ;
transform: scaleX(2);
}
}
.splashOut {
-webkit-animation-name: splashOut;
animation-name: splashOut;
-webkit-animation-duration: 1s;
animation-duration:1s;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-timing-function: linear;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
2 个回复
梦尋Junjie - 原来她有男朋友
这个问题可以等待动画加载完毕后 调用 image 的 _loadImage() 函数 可以解决该问题
<image ref="image" :src="viewSrc" class="c-image" :lazy-load="lazy" :mode="mode" @load="searchImage"
@error="load_error">
searchImage(){
if (this.mode == "widthFix") {
//-> 更新一下高度 避免歪瓜裂枣的
setTimeout(() => {
this.$refs.image._loadImage(); //-> 核心的调用
}, 800); //-> 800 毫秒能够满足大部分的动画, 通常动画效果不会超过500毫秒
}
}
梦尋Junjie - 原来她有男朋友
当然 如果你觉得 高度的瞬间变化会带来糟糕的体验度 你可以尝试着 用动画,
.c-image{
transition: all 0.3s ease-out;
}
这样就不会觉得硬生生的了