翻页卡虫野生动物园

Question

我用 react.js 和 anime.js 开发了一个网站自定义卡片轮播。我在屏幕中央的卡片上做了一个翻转动画。它适用于 Opera、Firefox 和 chrome，但我对 Safari 有疑问。我用 safari 13.0.4 测试它。动画没问题，但在动画之后，文字就在卡片后面。在第 3 次迭代后它工作正常。

front card

back card Opera, Chrome, Firefox and on Safari (after the 3rd flip for Safari)

back card Safari

back card Safari without color and with black text

这是我的 css:

.partner-card-focused--background__extern {
    transition: background-color 0.35s ease-in-out;
    border-bottom-right-radius: 5.5vh;
    height: 50vh;
    width: 35vh;
    margin-left: 2vw;
    margin-right: 2vw;
    margin-top: 3.8vh;
    padding: 1vh;
    box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.50);
    position: relative;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
}

.front,
.back
{
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.front {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
}

.back-hidden {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.back {
    top: 0;
    left: 0;
    transform: rotateY(180deg) translateZ(0);
    -webkit-transform: rotateY(180deg) translateZ(0);
    -moz-transform: rotateY(180deg) translateZ(0);
    -ms-transform: rotateY(180deg) translateZ(0);
}

.partner-card-focused--background__intern {
    border-bottom-right-radius: 4.5vh;
    height: 50vh;
    width: 35vh;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.partner-card-focused--image {
    position: relative;
    z-index: 1;
    width: 100%;
}

.partner-card-focused--description {
    position: fixed;
    margin: 1vh;
    font-size: 2vh;
    display: block;
}

这里是我的反应渲染方法：

render() {
        let overClass = "";
        if (this.state.hover)
            overClass += " blue-color--back"
        else
            overClass += " black-color--back"
        return (
            <div>
                <div className="partner-card-focused--text--container">
                    <div className="partner-card-focused--square blue-color--back"/>
                    <Typing text={this.state.partner.name} startTime={450} spacetime={80} class="partner-card-focused--text black-color font-first" />
                </div>
                <div ref={this.targetContainer}>
                <div className={"partner-card-focused--background__extern button" + overClass} onClick={this.click} onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover} ref={this.targetCard}>
                    <div className="front">
                        <h1 className="partner-card--text white-color font-first select-none back-hidden">{this.state.partner.name}</h1>
                        <div ref={this.targetBackgroundIntern} className="partner-card-focused--background__intern white-color--back back-hidden">
                            <img ref={this.targetImage} src={this.state.partner.image} className="partner-card-focused--image select-none back-hidden" alt="Focused partenaire poster"/>
                        </div>
                    </div>
                    <div className="back">
                        <p className="partner-card-focused--description white-color font-first back-hidden">{this.state.partner.description}</p>
                    </div>
                </div>
                </div>
            </div>
        )
    }

翻转方法：

this.flipped = !this.flipped;
let callback = () => {this.playing = false;}
anime({
     targets: this.targetCard.current,
     scale: [{value: 0.90}, {value: 1.25}, {value: 1, delay: 250}],
     rotateY: {value: '+=180', delay: 200},
     easing: 'easeInOutSine',
     duration: 400,
     complete: function(){
          callback();
     }
});

在此先感谢您的帮助。

Answer 1

由于 Safari 无法正确管理 transform-style 和 preserve-3d，您应该将 1px 到 translateZ() 放入 .back class 以避免该故障。

翻页卡虫野生动物园

Flip Card Bug Safari

javascript

css

reactjs

safari

anime.js