- From: Jonathan Snook <jonathan@snook.ca>
- Date: Mon, 1 Aug 2011 13:18:29 -0400
- To: Alan Gresley <alan@css-class.com>
- Cc: www-style@w3.org
> 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.
Okay, allow me to present another example without the use of JavaScript.
@keyframes fade {
0% { display:block; opacity: 1; }
100% { display:none; opacity:0; }
}
.dialog:not(:target) {
display: none;
animation: fade .5s 1;
}
.dialog:target {
display:block;
animation: fade .5s 1;
animation-direction: reverse;
}
(I may have gotten the direction wrong... doing this off the top of my head.)
In this case, the dialog is hidden by default unless a user clicks on a link that points to the dialog.
Even if we look at the use of JavaScript, the script has to be aware that animations are supported by the browser and branch based on whether to hide the element immediately or at the end of the animation. I'd rather that JavaScript just be aware of what it needs to do: change state on an element by applying a class. Allow CSS to define what that looks like (either by disappearing immediately, or by disappearing with a faded animation).
Jonathan.
Received on Monday, 1 August 2011 17:19:02 UTC