对变换元素内部的不透明度过渡产生负面影响答案

【问题标题】：negative effect on opacity transition inside transformed element对变换元素内部的不透明度过渡产生负面影响
【发布时间】：2014-11-09 11:54:58
【问题描述】：

请尝试一下。我更改了一个元素的不透明度，这会影响另一个包含文本的静态元素的外观。这很难解释，只是试着告诉我如何避免这种影响。在我看来，这仅在使用转换链时才会发生。

http://jsfiddle.net/6p8jf3d3/

HTML：

<div class="outer"> <div class="inner"></div> <div class="text">Hello</div> </div>

CSS：

div.outer {
    position: absolute;
    top: 100px;
    left: 50px;
    width: 200px;
    height: 100px;
    border: 1px solid black;

        -ms-transform: skew(-45deg);
    -webkit-transform: skew(-45deg);
            transform: skew(-45deg);
}

div.inner {
    width: 100%;
    height: 100%;
    background-color: #99CCFF;
    opacity: 0;

    -webkit-transition: all 0.5s;
            transition: all 0.5s;
}

div.text {
    position: absolute;
    top: 0;
    left: 0;  
    font-size: 2em;
    font-weight: bold;

        -ms-transform: skew(45deg);
    -webkit-transform: skew(45deg);
            transform: skew(45deg);
}

div.outer:hover div.inner {
    opacity: 1;
}

【问题讨论】：

你至少可以把它放在一个 jsfiddle 中。没有多少志愿者愿意为您完成所有工作。除此之外，请查看-webkit-transform-style: preserve-3d;
当我把它放在 jsfiddle 中时，有人认为我应该把代码放在这里......哦
您应该在此处发布代码，以供将来寻找此主题的其他人参考，以防链接断开。但是 jsfiddle 很有用，因为它可以让我们轻松测试您的代码的行为，并且您会更快地得到答案。
所以，原来的问题发生在 Chrome、Firefox 和 Opera 中。在 Safari（适用于 Windows）中没有负面影响。添加后 -webkit-transform-style: preserve-3d;有和没有供应商前缀，效果在不同的浏览器中发生了不同的变化。现在除了火狐以外的所有浏览器都有负面影响，火狐就清楚了。奇怪。

标签： html css transform css-transitions opacity

【解决方案1】：

将transform: translateZ(0); 添加到div.inner 将停止转换的跳跃/震动效果，但它会保持堆栈模糊。它更好，但并不完美：

Example Fiddle

【讨论】：

-webkit-backface-visibility：隐藏； /* Chrome, Safari, Opera */ backface-visibility: hidden;也很有帮助。
@PawlikDoc - 看起来它和transform: translateZ(0); 做的事情完全一样。我错过了什么吗？
我认为我们需要为不同的浏览器找到这些选项的某种组合...
@PawlikDoc - 对于所有接受转换的浏览器，translateZ(0) 选项应该可以工作。背面可见性并不是 3D 翻译的万灵药。它主要用于防止“翻转”的元素在变换结束时闪烁，因为双方都试图显示自己。浏览器中的其他效果只是副作用，不能保证始终按照您预期的方式运行。 translateZ 起作用的原因与 backface-visibility 相似，不需要像您描述的那样加倍考虑。
所以，我做了一些实验（不是用这个 jsfiddle，而是用更大的例子），并找到了 Chrome、Safari、Opera 和 Firefox 的解决方案。 translateZ、背面可见性和变换样式的组合。 jsfiddle.net/6p8jf3d3/4

【解决方案2】：

所以，我做了一些实验（不是用这个 jsfiddle，而是用更大的例子），并找到了适用于 Chrome、Safari、Opera 和 Firefox 的解决方案。 translateZ、背面可见性和变换样式的组合。 jsfiddle.net/6p8jf3d3/4

CSS：

div.outer {
    position: absolute;
    top: 100px;
    left: 50px;
    width: 200px;
    height: 100px;
    border: 1px solid black;

        -ms-transform: skew(-45deg);
    -webkit-transform: skew(-45deg);
            transform: skew(-45deg);

    -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
}

div.inner {
    width: 100%;
    height: 100%;
    background-color: #99CCFF;
    opacity: 0;

    -webkit-transition: all 0.5s;
            transition: all 0.5s;

        -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}

div.text {
    position: absolute;
    top: 0;
    left: 0;  
    font-size: 2em;
    font-weight: bold;

        -ms-transform: skew(45deg);
    -webkit-transform: skew(45deg);
            transform: skew(45deg);

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;   
}

div.outer:hover div.inner {
    opacity: 1;
}

【讨论】：