CSS转换，可见性不工作 [英] CSS transition with visibility not working

问题描述

在下面的小提琴，我分别在可见性和不透明度的转变。后者工作，但前者不工作。此外，在可见性的情况下，转换时间被解释为悬停出的延迟。发生在Chrome和火狐。这是一个错误吗？

http://jsfiddle.net/0r218mdo/3 /

案例1：

  #inner { 
 visibility：hidden; 
 transition：visibility 1000ms; 
} 
 #outer：hover #inner {
 visibility：visible;案例2：
 
 
 <$ p 
 
 
 
 
 
 
 
 
 
 
 ＃inner1 {
 opacity：0; 
 transition：opacity 1000ms; 
} 
＃outer1：hover＃inner1 {
 opacity：1; 
} 
  
 
 
解决方案
 一个错误  - 你只能转换序数/可计算的属性（一个简单的方式思考这是任何属性与数字的开始和结束数值。虽然有一些例外）。
 
 
 
这是因为转换通过计算两个值之间的关键帧，并通过推断中间量生成动画。
 
 
 
  visibility 在这种情况下是一个二进制设置（可见/隐藏），所以一旦过渡持续时间过去，属性只是切换状态，但是它实际上可以被视为过渡动画的最终关键帧，其中没有计算中间关键帧（什么构成隐藏/可见→不透明度→维度之间的值。因为它不是显式的，所以它们不被计算） / p> 
 
 
  opacity 是一个值设置（0-1），因此可以在所提供的持续时间内计算关键帧。 p> 
 
 
可以找到可转换（可动画）属性的列表 此处  
 
In the fiddle below, I've a transition on visibility and opacity separately. The latter works but the former doesn't. Moreover, in case of visibility, the transition time is interpreted as delay on hover out. Happens in both Chrome & Firefox. Is this a bug?

http://jsfiddle.net/0r218mdo/3/

Case 1:
#inner{
    visibility:hidden;
    transition:visibility 1000ms;
}
#outer:hover #inner{
    visibility:visible;
}
Case 2:
#inner1{
    opacity:0;
    transition:opacity 1000ms;
}
#outer1:hover #inner1{
    opacity:1;
}

解决方案
This is not a bug- you can only transition on ordinal/calculable properties (an easy way of thinking of this is any property with a numeric start and end number value..though there are a few exceptions).

This is because transitions work by calculating keyframes between two values, and producing an animation by extrapolating intermediate amounts.

visibility in this case is a binary setting (visible/hidden), so once the transition duration elapses, the property simply switches state, you see this as a delay- but it can actually be seen as the final keyframe of the transition animation, with the intermediary keyframes not having been calculated (what constitutes the values between hidden/visible? Opacity? Dimension? As it is not explicit, they are not calculated).

opacity is a value setting (0-1), so keyframes can be calculated across the duration provided.

A list of transitionable (animatable) properties can be found here

                        
这篇关于CSS转换，可见性不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！