Menu
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;
}
947
Visibility is an animatable property according to the spec, but transitions on visibility do not work gradually, as one might expect. Instead transitions on visibility delay hiding an element. On the other hand making an element visible works immediately.
To trigger an element's transition, toggle a class name on that element that triggers it. To pause an element's transition, use getComputedStyle and getPropertyValue at the point in the transition you want to pause it. Then set those CSS properties of that element equal to those values you just got.
In the CSS, use the @keyframes rule paired with fadeIn. At 0%, set the opacity to 0. At 100%, set the opacity to 1. This creates the fade-in effect.
You can't use the display property in CSS animations either.
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
186
Visibility is animatable. Check this blog post about it: http://www.greywyvern.com/?post=337
You can see it here too: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
Let's say you have a menu that you want to fade-in and fade-out on mouse hover. If you use opacity:0 only, your transparent menu will still be there and it will animate when you hover the invisible area. But if you add visibility:hidden, you can eliminate this problem:
div {
width:100px;
height:20px;
}
.menu {
visibility:hidden;
opacity:0;
transition:visibility 0.3s linear,opacity 0.3s linear;
background:#eee;
width:100px;
margin:0;
padding:5px;
list-style:none;
}
div:hover > .menu {
visibility:visible;
opacity:1;
}<div>
<a href="#">Open Menu</a>
<ul class="menu">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
