Re: [css3-animations] Effect of display:none and visibility:hidden on animations

On 30/07/2011 5:36 AM, Jonathan Snook wrote:
> (apologies if this comes through twice; the messaging on first
> sending an email to the list is a little confusing)
>
> So, I've been trying to reconcile some considerations about CSS3
> Animations. I talked a bit about them recently and explained
> keyframes like we were defining classes that were being applied to
> the element at certain points of time and transitioning values
> between those times.
>
> However, currently, non-transitionable properties are ignored. I'd
> like to suggest that this be changed and I'll give you a particular
> use case:
>
> div { display:block; }
>
> div.hidden { display:none; animation: slide-out 1s 1; }
>
> In this example, the hidden class is applied to a DIV via JavaScript.
> The problem is that by setting display:none, neither animations nor
> transitions will work. I would propose that non-transitionable values
> be allowed.
>
> @keyframes slide-out {
> 0% { display:block; opacity: 1; }
> 100% { display:none; opacity:0; }
> }
>
> In this way, the element fades to nothing and then is removed from
> flow. As you can see by this example, the fall back for browsers that
> don't support animations is what we want and still accessible (in the
> sense that we often want things removed from the page for both visual
> users and screenreader users).

> Jonathan.


If the hidden class is applied by javascript, then you can query the end 
of the animation to trigger display: none. Something like the below code 
(I have changed the 'class' for and 'id' for demonstration only). This 
also disables the animation if javascript is disabled.


<!doctype html>

<script type="text/javascript">

     var controller = {};

     controller.init = function () {
         // put a listener on the initial splash animation
         this.splash = document.getElementById('element');
         this.splash.addEventListener('webkitAnimationEnd', this, false);

     };

     controller.handleEvent = function (event) {
         if (event.type == 'webkitAnimationEnd') {
         document.getElementById('element').style.display="none";
         }
     };

     window.addEventListener('DOMContentLoaded', function () {
         controller.init();
     }, false);

</script>

<style>

body { padding: 50px; }
.outer { border: 5px solid silver; margin-top: 50px; }

#element {
   width: 100px;
   background: blue;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: 1;
   -webkit-animation-duration: 4s;
   /* animation name is in javascript */
}
@-webkit-keyframes run {
   0% { display: block; opacity: 1; height: 100px; -webkit-transform: 
rotate(0deg); }
   100% { display: block; opacity: 0; height: 100px; -webkit-transform: 
rotate(90deg); }
}

</style>

<button 
onclick="document.getElementById('element').style.webkitAnimationName = 
'run';">Begin animation</button>

<p>Refresh to reset</p>

<div class="outer">
   <div id="element"></div>
</div>



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Monday, 1 August 2011 10:16:08 UTC