最初隐藏的元素上的CSS转换

前端之家收集整理的这篇文章主要介绍了最初隐藏的元素上的CSS转换前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在一个有display:none set的元素上进行css转换.请考虑以下代码
<!DOCTYPE html>
<html>
    <head>
        <Meta charset="utf-8">
        <title>CSS Transition From Hidden</title>

        <style type="text/css">
            div {
                -webkit-transition-property: all;
                -webkit-transition-duration: 2s;
            }       

            div.hidden {
                display: none;
                opacity: 0;
            }    

            div.from {
                opacity: 0;
            }
        </style>     

        <script type="text/javascript">
            function loaded() {
                var e = document.getElementById("foo");
                e.className = "from";
                window.webkitRequestAnimationFrame(function(t) {
                    e.className = null;
                });
            }
        </script>
    </head>
    <body onload="loaded()">
        <div id="foo" class="hidden">
            My test div
        </div>
    </body>
</html>

我想从class =“div.hidden”转到class =“”,即从display:none;不透明度:0;显示:块;不透明度:1;但是,在chrome(至少)中,具有display:none的对象不会生成动画.元素立即进入结束状态.

我的解决方法是先将元素设置为display:block;不透明度:0;然后在下一帧中进行转换(使用requestAnimationFrame().它有点尴尬,我在spec中找不到这种行为的任何解释.我知道我可以使用visibility-attribute,但我不知道我不想使用它,因为我不想布局隐藏的元素.

所以,问题是:这是正确的行为还是错误?如果它是正确的行为,是否有更好的方法来编写代码?请注意,我不是在询问是否有任何库可以执行此操作,我想知道是否有更好的方法直接在DOM上执行此操作.

解决方法

关于这是否在规范中的问题,在www-style@w3.org列表 here上有一个有趣的帖子.我还没有读过所有内容,但似乎他们没有从无人开始动画,而且转换规范也需要澄清这一点.

更新:我已经询问了邮件列表,并且我获得了工作组会议minutes链接,如果启动状态为display:none,则决定不应该进行转换.

要确保执行转换,必须确保在设置为新目标之前计算动画属性的值.当display设置为none时,通常不会计算值.这是一个工作示例:

<!DOCTYPE HTML>
<html>
  <head>
    <Meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>Fade</title>

    <style>
      .hidden { display: none }
      .start { opacity: 0 }
      .transition { opacity: 1; -webkit-transition: opacity 1s }
    </style>
  </head>
  <body>
    <div id='div' class="hidden">Test</div>

    <script>
      var elem = document.getElementById('div');

      function ontransitionend(event) {
        elem.className = null;
        elem.removeEventListener('transitionend',ontransitionend);
      }
      elem.addEventListener('transitionend',ontransitionend);

      elem.className = 'start';
      window.getComputedStyle(elem).opacity;
      elem.className = 'transition';
    </script>
  </body>
</html>

请注意,您必须访问opacity属性.调用getComputedStyle()是不够的!

猜你在找的CSS相关文章