Javascript 使用变换和不透明度触发 CSS 转换在 Firefox 71 中不起作用

Question

使用Firefox 71. 我想触发一个过渡，其中输入按钮（实际上是 div，id=target，从右侧滑入并同时淡入。

幻灯片效果很好，但不透明现象没有发生。显然我必须从 JavaScript 触发这个，因为 div 不在屏幕上所以 pseudo class CSS 触发器是无用的。

我已经用动画和 @keyframes 做到了这一点，效果很好，但我喜欢过渡的简洁性。任何帮助和进一步的帮助将不胜感激。史蒂夫

<!DOCTYPE html>
<html>
    <head>
        <title>Test Transition</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style type="text/css">
            body{
                padding: 0;
                margin: 0;
                font-family: Arial;
                font-size: 48pt;
                box-sizing: border-box;
            }

            #target{
                position: absolute;
                width: 200px;
                height: 200px;
                right: -212px;
                bottom: 200px;
                border: 6px solid darkblue;
                border-radius: 100px;
                opacity: 0;
                transition-property: transform, opacity;
                transition-duration: 1s;
                transition-timing-function: ease-in;
            }

            #inner_target{
                position: relative;
                text-align: center;
            }

            .start{
                transform: translateX(-412px);
                opacity: 1;
            }
        </style>
    </head>
    <body>
        <button id="launch" type="button">Launch</button>

        <div id="target">
            <p id="inner_target">Enter</p>
        </div>

        <script type="text/javascript">
            let launch = document.getElementById('launch');
            let target = document.getElementById('target');

            launch.addEventListener('click', startAnimation);

            function startAnimation(e) {
                target.classList.toggle('start');
            }
        </script>
    </body>
</html>

Answer 1

这是因为 CSS 特殊性。您正在使用 ID #target 来设置元素的样式，然后应用 CSS class start 使其移动和淡入。原始的 CSS 块因为 #target 包含起始 opacity，但没有起始 transform。在设置 start class 之后，在元素上设置 transform 并移动。 opacity也设置了，但是没有效果。原因是原来的opacity是用ID设置的，新的opacity是用class设置的，在CSS中ID比[=38更具体=]是的。因此，原来的 opacity 胜出，什么也没有发生。

更改代码以使用 class 而不是 ID 来设置目标元素的样式：

<div id="target" class="mytarget">
  ...
</div>

并将您的 CSS 中的 ID 更改为 class：

.mytarget {
  ...
  opacity: 0.0;
  transition-property: transform, opacity;
  transition-duration: 1s;
  transition-timing-function: ease-in;
}

您的 opacity 转换现在可以工作了 (CodePen)。

Javascript 使用变换和不透明度触发 CSS 转换在 Firefox 71 中不起作用

Javascript triggered CSS transition using transform and opacity not working in Firefox 71

css

opacity

css-transitions

css-transforms