CSS转换在最初隐藏的元素 [英] CSS transition on an initially hidden elemement
问题描述
我想对一个具有 display：none 设置的元素进行css转换。考虑下面的代码：
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title> CSS从隐藏转换< / 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 =fooclass =hidden>
我的测试div
< / div>
< / body>
< / html>
我想从 class =div.hidden code>到 class =，即从 display：none; opacity：0; 到 display：block; opacity：1; 但是，在chrome（至少）中，具有 display：none 的对象不会生成动画。元素立即到达结束状态。
我的工作是首先将元素设置为 display：block; opacity：0; 然后在下一个帧中进行转换（使用 requestAnimationFrame（），这是一种尴尬，请在规范中找到此行为的任何解释，我知道我可以使用 visibility -attribute，但我不想使用它，因为我不想布局隐藏的元素。
所以，问题是：这是正确的行为还是一个错误？如果是正确的行为，是否有更好的方式来编写代码？注意，我不是问是否有任何库可以做，我想知道是否有更好的方法直接在DOM上做。
在规范中，有一个有趣的线程在www-style@w3.org列表这里。我没有读过所有，但似乎因为他们不开始动画从无，并且过渡规范需要
< /lists.w3.org/Archives/Public/www-style/2012Jan/0099.htmlrel =nofollow>分钟的工作组会议，其中决定如果开始时不应该进行转换状态是
display：none 。 要确保执行转换，必须确保在将animated属性的值设置为其新目标之前计算该属性的值。当显示设置为none时，通常不会计算值。这是一个工作示例：
<！DOCTYPE HTML>
< html>
< head>
< meta http-equiv =content-typecontent =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>测试< / 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（）！
是不够的
I would like to make a css transition on an element which has display: none set. Consider the following code:
<!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>
I would like to go from class="div.hidden" to class="", i.e. from display: none; opacity: 0; to display: block; opacity: 1; However, in chrome (at least) an object that has display: none does not animate. The element goes to the end state immediately.
My work around for this is to first set the element to display: block; opacity: 0; and then do the transition in the next frame (using requestAnimationFrame(). It is kind of awkward, and I can't find any explanation for this behavior in the spec. I know that I could use the visibility-attribute, but I don't want to use it because I don't want to layout the hidden element.
So, the questions are: Is this the correct behavior or a bug? If it is the correct behavior, is there a better way to write the code? Note that I'm not asking if there are any libraries that can do it, I want to know if there is a better way to do it directly on the DOM.
Regarding the question on if this is in the spec, there is an interesting thread on the www-style@w3.org list here. I haven't read it all but it seems as they don't start animations from none and that the transition spec needs to clarify that as well.
Update: I have asked the mail list and I got this link to the minutes of a work group meeting where it was decided that there should be no transition if the start state is display: none.
To make sure that the transition is performed you must make sure that the value of the animated property is calculated before it is set to its new target. Values are normally not calculated when display is set to none. Here is a working example:
<!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>
Note that you have to access the opacity property. It is not enough to call getComputedStyle()!
这篇关于CSS转换在最初隐藏的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
