Transitioning children elements

Vue.js version

1.0.26

Reproduction Link

http://jsfiddle.net/0gmusue5/

Steps to reproduce

• Click on the button to open the slider (OK)
• Click on the darkened zone on the left to close the slider (FAIL) -> The element is never removed. (We can’t click on the body anymore, in that case)

What is Expected?

The element should be removed after animation.

What is actually happening?

The element is not removed from the DOM. (afterLeave is never called)

More details

Note: I had to add the CSS transition: all 2s; to the class .slider-transition. Otherwise VueJS doesn’t know about the transition time.

Improvement

I feel like the way I’m using the transition system is a bit “hacky” although I have no idea how to avoid it. Ideally I’d like to be able to call transitions as follow:

<div id="slider" v-if="opened">
  <div id="slider-backdrop" @click="$emit('close')" transition="fade"></div>
  <div id="slider-content" transition="slide"></div>
</div>

But the transition attribute is only allowed at the v-if level.

Did I miss something ? What do you think ?

[Elfayer]

Here is a “trick” I found to make it work : http://jsfiddle.net/0gmusue5/1/

The solution is still to add a false transition to the VueJS transitioned element and add a false attribute opacity: 0.999 to make it work (opacity: 1 doesn’t work, I guess there needs to be a transition in a way). It still feels like a hack to me. Any advice or opinion about this ?

.slider-transition {
  transition: all 1s; // trick
  #slider-backdrop {
    transition: opacity .5s;
    opacity: .5;
  }
  #slider-content {
    transition: transform 1s;
    transform: translateX(36px);
  }
}

.slider-enter, .slider-leave {
  opacity: 0.999; // trick
  #slider-backdrop {
    opacity: 0;
  }
  #slider-content {
    transform: translateX(calc(100% + 36px));
  }
}

[yyx990803]

This will be a wontfix in 1.x, and should be addressed in 2.x via the ability to explicitly declare transition durations (#4371)