CSS中的不透明度淡化问题答案

【问题标题】：Issue with opacity fade in CSSCSS中的不透明度淡化问题
【发布时间】：2019-10-04 15:04:59
【问题描述】：

我在尝试淡入 CSS 中的某些元素时遇到了 CSS 问题。我想在旋转过渡后立即以淡入淡出效果显示图像中的某些元素，但它不起作用。

我做了一个 jsfiddle，您可以通过将鼠标悬停在图像上来激活效果： https://jsfiddle.net/egfjp36h/

这是我的 HTML 代码：

<div class="flip-box">
    <div class="fut-player-card card-display">
        <div class="fut-front">
            <div class="player-card-top player-card-top-color">
                <div class="player-master-info">
                    <div class="player-rating">
                        <span>97</span>
                    </div>
                    <div class="player-position">
                        <span>RW</span>
                    </div>
                    <div class="player-nation">
                        <img src="https://selimdoyranli.com/cdn/fut_card/img/argentina.svg" alt="Argentina" draggable="false">
                    </div>
                    <div class="player-club">
                        <img src="https://selimdoyranli.com/cdn/fut_card/img/barcelona.svg" alt="Barcelona" draggable="false">
                    </div>
                </div>
                <div class="player-picture">
                    <img src="https://selimdoyranli.com/cdn/fut_card/img/messi.png" alt="Messi" draggable="false">
                </div>
            </div>

            <div class="player-card-bottom">
                <div class="player-info player-info-color">

                    <div class="player-name player-name-border"><span>MESSI</span></div>

                    <div class="player-features">
                        <div class="player-features-col player-features-col-border">
                            <span>
                                <div class="player-feature-value">97</div>
                                <div class="player-feature-title">RDV</div>
                            </span>
                            <span>
                                <div class="player-feature-value">95</div>
                                <div class="player-feature-title">CTR</div>
                            </span>
                            <span>
                                <div class="player-feature-value">94</div>
                                <div class="player-feature-title">TRANSF</div>
                            </span>
                        </div>
                        <div class="player-features-col player-features-col-border">
                            <span>
                                <div class="player-feature-value">99K€</div>
                                <div class="player-feature-title">CA</div>
                            </span>
                            <span>
                                <div class="player-feature-value">35</div>
                                <div class="player-feature-title">DEF</div>
                            </span>
                            <span>
                                <div class="player-feature-value">68</div>
                                <div class="player-feature-title">PHY</div>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>

还有我的 CSS：

         .fut-player-card{
            position: relative;
            width:300px;
            height:485px;
            background-position: center center;
            background-size:100% 100%;
            background-repeat: no-repeat;
            padding:5.9rem 0;
            z-index: 2;
            transition: 200ms ease-in; 
            margin-left: auto;
            margin-right: auto;
        }

        .card-display{
            background-image: url(https://selimdoyranli.com/cdn/fut_card/img/card_bg.png);
        }

        .card-display2{
            background-image: url("img/fut/fut1.png");
        }

        .card-display3{
            background-image: url("img/fut/fut2.png");
        }

        .card-display4{
            background-image: url("img/fut/fut3.png");
        }

        .player-card-top{
            position: relative;
            display: flex;
            padding: 0 3.5rem;
        }

        .player-master-info{
            position: absolute;
            line-height: 3.2rem;
            font-weight: 300;
            padding: 3rem 0;
            text-transform: uppercase;
        }

        .player-rating{
            font-size:3rem;
        }

        .player-position{
            font-size: 2.2rem;
        }

        .player-nation{
            display: block;
            width:3rem;
            height:25px;
            margin: 0.5rem 0;
        }

        .player-nation img{
            width:100%;
            height: 100%;
            object-fit: contain;
        }

        .player-club{
            display: block;
            width:3.1rem;
            height:40px;
        }

        .player-club img{
            width:100%;
            height: 100%;
            object-fit: contain;
        }

        .player-picture{
            width:200px;
            height:200px;
            margin: 0 auto;
            overflow: hidden;
        }

        .player-picture img{
            width:100%;
            height:100%;
            object-fit: contain;
            position: relative;
            right: -1.5rem;
            bottom: 0;
        }

        .player-extra{
            position: absolute;
            right:0;
            bottom: -0.5rem;
            overflow: hidden;
            font-size:1rem;
            font-weight: 700;
            text-transform: uppercase;
            width:100%;
            height:2rem;
            padding:0 1.5rem;
            text-align: right;
            background:none;
        }

        .player-extra span{
            margin-left: 0.6rem;
            text-shadow:2px 2px #333;
        }

        .player-card-bottom{
            position: relative;
        }

        .player-info{
            display: block;
            padding:1rem 0;
            width:90%;
            margin:0 auto;
            height: auto;
            position: relative;
            z-index: 2;
        }

        .player-info-color, .player-card-top-color{
            color:#e9cc74;
        }

        .player-info-color2, .player-card-top-color2{
            color:#130d40;
        }

        .player-name{
            width:100%;
            display: block;
            text-align: center;
            font-size:2.2rem;
            text-transform: uppercase;
            padding-bottom: 0.3rem;
            overflow: hidden;
        }

        .player-name-border{
            border-bottom: 2px solid; 
            border-color: rgba(233,204,116, 0.1);
        }

        .player-name-border2{
            border-bottom: 2px solid; 
            border-color: rgba(13, 33, 74, 0.2);
        }

        .player-name span{
            display: block;
            text-shadow:2px 2px #111;
        }

        .player-name2 span{
            display: block;
            text-shadow:2px 2px #fff;
        }

        .player-features{
            margin: 1rem auto;
            display: flex;
            justify-content: center;
        }

        .player-features-col{
            border-right: 2px solid;
            padding: 0 3rem;
        }

        .player-features-col-border{
            border-color: rgba(233,204,116, 0.1);
        }

        .player-features-col-border2{
            border-color: rgba(13,33,74, 0.2);
        }

        .player-features-col span{
            display: flex;
            font-size: 2rem;
            text-transform: uppercase;
        }

        .player-feature-value{
            margin-right: 1rem;
            font-weight: 700;
        }

        .player-feature-title{
            font-weight: 300;
        }

        .player-features-col:last-child{
            border:0;
        }

        .flip-box {
            perspective: 1000px;
            display: inline-block;
        }

        .fut-player-card{
            position: relative;
            text-align: center;
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }

        .flip-box:hover .fut-player-card{
            transform: rotateY(180deg);
        }

        .flip-box:hover .fut-front{
            filter: alpha(opacity=100);
            opacity:1;
        }

        .fut-front{
            position: absolute;
        }

        .fut-front{
            transition: opacity 0.8s linear 1.2s;
            filter: alpha(opacity=0);
            opacity: 0;
        }

我认为这些元素没问题，但是当鼠标离开图像而不是鼠标移到图像上时，过渡才有效：

        .flip-box:hover .fut-front{
            filter: alpha(opacity=100);
            opacity:1;
        }

        .fut-front{
            transition: opacity 0.8s linear 1.2s;
            filter: alpha(opacity=0);
            opacity: 0;
        }

编辑：它适用于 Firefox，但不适用于 Chrome

【问题讨论】：

不确定您要达到什么目的，但是当我将鼠标悬停在图像上时，统计数据会在悬停 1.2 秒后显示，然后当我悬停时，统计数据会在 1.2 秒后消失。似乎完全按照程序工作。
@disinfor 我没有获得过渡属性，因为我不希望统计数据显示粗暴，但在旋转完成后具有淡入淡出效果。
当我悬停时会发生这种情况：图像旋转，统计数据淡入。当我鼠标移开时，图像旋转，然后统计数据淡出。
@disinfor 感谢您的回答。在我帖子的 jsfiddle 链接中，当我悬停时我看不到淡入淡出效果，我只在鼠标移开时看到它。但是，如果您将旋转值更改为 360 而不是 180，它会完美运行...但我想让它执行 180° 旋转
您在哪个浏览器中看到问题？在 Firefox 69 中，我看到了与 @disinfor 相同的褪色行为。

标签： css animation transition

【解决方案1】：

您可以使用javascript选择元素并添加：

addEventListener("mouseenter", function( event ) { 
//change opacity here
})

【讨论】：

感谢您的回答，我将使用它作为最后的手段，但我想在 CSS 中取得成功，因为我知道在 CSS 中可以做到这一点。