Question

我制作了一个React组件，该组件可以无限循环地动态更改4个div的背景，每次更改背景时，都有一个使用toggle类触发的css动画。

要获取所有图像，我将Webpack的“ require.context”函数与url-loader配对使用，以使用base64数据url数组将其用作背景的新来源。

我的工作方式在Chrome（69.0.3497.100），Opera（56.0.3051.43）和Firefox（62.0.3）中可以正常工作。但这在Safari（12.0）中无法正常运行，我可以看到一些“毛刺”。

当我检查页面时，可以看到动画已正确触发，但是图像显示在其后，有时图像不可见。

另一个奇怪的行为是，它会影响包含div的部分上方的固定元素，它们会闪烁。

我记录了问题，因此您可以了解我的意思： https://www.youtube.com/watch?v=EO-9Ks-FhOo

这里还有一个暂存版本。 http://ferrarism.at/today/staging

这是我的React组件：

import React from "react"



function importAll(r) {
return r.keys().map(r);
}

const imageArray = importAll(require.context('../img/clients', true));



export default class ClientReel extends React.Component {
constructor(props){
    super(props);
    this.state = {
        images: imageArray
    }
}
render(){
    const {images} = this.state



    var count;
    const randomClient = [];

    for (count = 1; count <= 4; ++count) {
        var i = Math.floor((Math.random() * (images.length - count)) + 1);
        randomClient.push(images[i]);
        images[i] = images[images.length - count];
    }

    const ImagesToRender = randomClient.map((item, i) => {
            return (
                <div key={i} className="clientReel-item">
                    <div className="itemImage" style={{ background: `url(${item}) center center / 100% no-repeat` }}></div>
                </div>
            )
    })
    return(
        <React.Fragment>
            {ImagesToRender}
        </React.Fragment>
    )
}

componentDidMount(){
    const {images} = this.state
    const reelItemImage = document.querySelectorAll(".itemImage")
    const reelItems = document.querySelectorAll(".clientReel-item")
    var i = 0;
    var f = 0;

    var timing = 500;
    (function loop() {
        setTimeout(function () {
            reelItems[i].classList.toggle("reelFlip")
        }, timing - 100)
        if (f < (images.length - 1)) {
            f++;
            reelItemImage[i].style.background = "url(" + images[f] + ") center center / 100% no-repeat"
        } else {
            f = 0;
            reelItemImage[i].style.background = "url(" + images[f] + ") center center / 100% no-repeat"
        }
        if (i < (reelItems.length - 1)) {
            i++;
        } else {
            i = 0;
        }
        setTimeout(loop, timing);
    })();
}
}

这是我的组件已编译的CSS：

.section__client-reel .wrapper #clientReel .clientReel-item {
    flex-basis: 21.739%;
    height: 91px;
    margin: 18px 0;
    transform: rotateX(0deg);
    transition: all 0.5s cubic-bezier(0.3, 1, 0.3, 1);
    -webkit-transition: all 0.5s cubic-bezier(0.3, 1, 0.3, 1); 
}

.section__client-reel .wrapper #clientReel .clientReel-item .itemImage {
      width: 100%;
      height: 100%; 
}

.section__client-reel .wrapper #clientReel .reelFlip {
    transform: rotateX(-180deg);
    -webkit-transform: rotateX(-180deg);
    transition: all 0.5s cubic-bezier(0.3, 1, 0.3, 1);
    -webkit-transition: all 0.5s cubic-bezier(0.3, 1, 0.3, 1);
 }

.section__client-reel .wrapper #clientReel .reelFlip .itemImage {
      transform: rotateX(180deg);
      -webkit-transform: rotateX(180deg); 
}

寻找解决方案已经有几个小时了，但我什么都没找到。如果您有任何想法，请放心！

Answer 1

[编辑] 刚尝试用PHP做到这一点，我遇到了与React完全相同的问题，所以现在我几乎可以确定这是与CSS相关的问题。

此Css属性会发生这种情况：

hello

如果我使用：

transform: rotateX(-180deg)

不再有rotateX，不再有“毛刺” 但我想在rotateX上安装它。使用TweenMax可能是有效的选项，对吗？（我已经将GSAP作为依赖项了

Answer 2

[FIX] 将transform: translate3D(0,0,0)添加到父元素可以解决此问题

仅限Safari的错误

2 个答案: