Re: Proposal for a "duration" meta-property(?) on a css class

On Wed, Sep 30, 2015 at 7:29 AM, George Triantafyllakos
<gtrianta@gmail.com> wrote:
> Hello everyone.
>
> I was thinking that it would be really useful if a css meta-property(?)(*)
> existed that allowed one to set a specific duration (in milliseconds) that a
> css class will be applied on an element. It would definitely simplify the
> use of classes as a tool for immediate user feedback (e.g. toggle short
> notification messages after certain actions).
>
> An example use case can be seen here: https://jsfiddle.net/gtria80/hx2dph3j/
> There is a button that can move a user to the next page of, let's say, a
> form, and the button is disabled until the user selects at least 3 options.
> When she does, the button is enabled and a short notification message
> appears next to the button for 1 second.
> An easy way to do this (one of many I guess) is to hide the message at first
> (display:none or opacity:0 or visibility:hidden or ...), create a css class
> that shows the message, add this class dynamically to the message element
> whenever you want, and hide it again after a delay (that you'll have to
> create programmatically).
>
> However, if a "duration" meta-property existed that allowed one to say that
> a class should be applied on an element for a certain period of time, the
> javascript part that programmatically waits and removes this class after 1
> second, could be dismissed. You would only have to add the class on the
> element you want and it would be automatically removed after the designated
> period of time.
>
> An idea on how this could be specified would be to set this duration
> meta-property in a way similar to the :nth-child selector, that is:
>
> .visible:duration(1000) { display:inline; } or
> .visible:dur(1000) { display:inline; } (as a shorter alternative)
>
> ....where 1000 is obviously in milliseconds ( = 1sec).
> However, this is just an idea/suggestion on how such a feature could be
> specified.
>
> Has something similar been suggested/discussed before?
> Eventually, do you think it would be a good idea? I really believe that it
> would be useful in several occasions, especially in web apps.

Your usecase has already been covered by CSS animation.

So, for your specific case, you can do this:

@keyframes show-a-while {
  0% { visibility: visible; }
  100% { visibility: hidden; }
}
.visible {
  animation: show-a-while 1s step-end;
  visibility: hidden;
}

Note that you need to use script to remove the class anyway, since CSS
can never change the content of the HTML document.

- Xidorn

Received on Wednesday, 30 September 2015 14:03:07 UTC