[css-transitions] Feature request: transion-out

Hi,

I guess the feature request is probably going to be rejected, but it makes the problem I’m going to describe a little easier to understand. So here it is:

Imagine we have an element, and at any time a class might be attached to it, the class has two possible values, say, “.foo” and “.bar”. The element has a transition property specified, so whenever the class is removed (we ignore adding for now), a transition is occurred.

Now the question is: how to specify the transition property so that it transits differently based on which class is removed (div.foo -> div or div.bar -> div).

The use case is a menu system. When the mouse hovers over a hidden menu, it is displayed. Now, to provide a better UX, when the mouse leaves the menu, a transition delay is applied so the menu won’t hide immediately, but i also want to provide a toggle button for the menu, and when the menu is hidden by the button, it should hide immediately.

A demo page: http://jsbin.com/layuhadiku/1/edit?html,css,output

I couldn’t find an elegant solution to implement this, and the only thing i can think of is if the spec allows a property like “transition-out”:

menu {
  opacity: 0;
  transition: 0.2s 1s;
}
menu:hover {
  opacity: 1;
  transition-delay: 0s;
}
menu.visible {
  opacity: 1;
  transition-delay: 0s;
  transition-out-delay: 0s;
}

the “visible” class is toggled by the toggle button, and the "transition-out” property works like this: it’s applied whenever the selector is no longer applied, and it overrides other transition property according to the specificity rule.

I’m not sure the feature I’m proposing is already elegantly doable (my currently solution is a hack. It adds a temp class, which removes the delay, when .visible is about to be removed and then remove it in the transitionend event for the .visible class)  with the current spec. If so, I’d be very grateful if someone could enlighten me. If not, will you consider adding a property like this to the spec?

Thank you.

Received on Saturday, 13 December 2014 03:52:43 UTC