[英]CSS opacity transition won't work for Safari
我正在尝试实现某种懒惰的背景图像加载。 我希望图像在加载后立即淡入。 因此,我在加载时更改了保持 div 的不透明度。 它适用于 Chrome 或 Firefox,但不知何故不适用于 Safari。 使用 Safari 图像只是出现没有任何过渡。 为何如此?
import React, {Component} from 'react';
import './ImageHolder.css'
class LazyImage extends Component {
state = {
src: null,
};
componentDidUpdate(prevProps, prevState, snapshot) {
if (prevProps.image !== this.props.image) {
this.setState({src: null});
this.loadImage();
}
}
componentDidMount() {
this.loadImage();
}
loadImage = () => {
const src = this.props.image;
const imageLoader = new Image();
imageLoader.src = src;
imageLoader.onload = () => {
this.setState({src: src})
};
};
classList = (classes) => {
return Object
.entries(classes)
.filter(entry => entry[1])
.map(entry => entry[0])
.join(' ');
};
render() {
const style = {
backgroundImage: 'url(' + this.state.src + ')',
};
return(
<div className="h-image-wrapper" style={{backgroundColor: this.props.bgColor}}>
<div className={this.classList({
'h-image-holder': true,
'h-image-loaded': this.state.src,
})} style={style} />
</div>
);
}
}
export default LazyImage;
.h-image-holder {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
will-change: opacity, transform;
pointer-events: none;
opacity: 0;
width: 100%;
height: 100%;
transition: opacity .6s ease;
-webkit-transition: opacity .6s ease;
}
.h-image-wrapper {
position: relative;
width: 100%;
height: 100%;
will-change: transform;
pointer-events: none;
}
.h-image-loaded {
opacity: 1;
}
也许这会有所帮助。 在Safari CSS Visual Effects Guide上说你必须使用这个:
-webkit-transition-property: opacity;
您还可以更改它的持续时间:
-webkit-transition-duration: 2s;"
注意到这里
注意:并非所有 CSS 属性都可以设置动画。 一般来说,任何接受数字、长度、百分比或颜色值的 CSS 属性都是可动画的。 一些接受离散值的 CSS 属性也可以设置动画,但在更改时显示值之间的跳转而不是平滑过渡,例如可见性属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.