CSS透明度过渡在Safari中不起作用。

Question

我正在尝试实现一种延迟加载背景图片的方法。我希望图片在加载完后能够淡入显示。因此，我在加载时更改了占位 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;
}

- Tom

Answer 1

也许这可以帮助。 在Safari CSS视觉效果指南上，它说你必须使用以下内容：

-webkit-transition-property: opacity;

你还可以更改它的持续时间：

-webkit-transition-duration: 2s;"

- F2BEAR

Answer 2

请注意这里

注意：并非所有的CSS属性都可以进行动画处理。通常情况下，任何接受数字、长度、百分比或颜色值的CSS属性都可以进行动画处理。一些接受离散值的CSS属性也可以进行动画处理，但在更改时会显示值之间的跳跃而不是平滑过渡，例如visibility属性。

Safari CSS参考手册

- Cj Oyales