我想在一个有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>
