[csswg-drafts] [css-transition-transition-delay-animation-extension]

nixkuroi has just created a new issue for 
https://github.com/w3c/csswg-drafts:

== [css-transition-transition-delay-animation-extension] ==
This request is in regard to the CSS Transition and Transition-delay 
rules
https://www.w3.org/TR/css3-transitions/#transition-delay-property

The proposal is to make any rule transitionable, even those that can 
not be animated.  The result would be that the transition happens at 
the end of the delay.

**Use cases:**

The most obvious example would be opacity:0  followed by display:none;

```
.fade-out-and-disappear {
    display: none;
    opacity: 0;
    transition: opacity .3s linear, display .3s linear;
}
```

Currently, the display:none will fire and the opacity transition will 
be moot. If the display:none was allowed to fire at the end of the 
transition timer, it would effectively remove interaction with the 
element and not block pointer events beneath it.  

Another example is with the css pointer events selector. Once set, it 
does not allow the element to be interacted with using the mouse.  If 
pointer-events was allowed to fire after the transition delay, it 
would allow for the following scenario where the opacity transition 
can be canceled by :hover. 

```
.fade-out {
     opacity: 0;
     pointer-events: none;
     transition: opacity .3s linear, pointer-events .3s linear;
}

.fade-out: hover {
   opacity: 1;
   pointer-events: initial;
}
```

**No (obvious) breakage**

The above changes shouldn't break any well-formed code that has 
already been written since transitioning these components does nothing
 at this point. 

Alternatively, an addition trandition-timing function called 
"endstate" could be added that to make the time of transition 
explicit.   


Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/181 using your GitHub 
account

Received on Thursday, 9 June 2016 22:41:34 UTC