Vue: When the transition "fade out" ended, it removes all "out" classes in the element

[YamiOdymel]

Vue.js version

2.0.0-rc.5

Steps to reproduce

<transition enter-active-class="fade out right" ...>
        <section class="out and cubic animated">
            ...

What is Expected?

When the transition ends, it should've removed fade out right and left out and cubic animated.

What is actually happening?

When the transition ends, it left and cubic animated only (everything with out was gone).

 

Why fade out naming convention?

Because I am using the CSS framework: Semantic-UI,

the naming convention with Semantic-UI is to split each word,

for example: ui input, ui large fluid input so are the animations, any possible ways to fix this please?

[LinusBorg]

Why would you add the out class via enter-active-class if it's already present on the element, and should stay there?

If thats the case then out has nothing to do with the transition and should not be in enter-active-class

[YamiOdymel]

Sorry that's just an simplified example, it's actually

<transition enter-active-class="fade in right" leave-active-class="fade out right" mode="out-in">
        <section class="out and cubic animated" v-show="screen === 'register'">

[LinusBorg]

I still have the same question, basically.

What function does out being present in the leave-active-class definition have on the animation/transition if it is present before, during, and after anyway?

To put it in other terms: I expect that this: leave-active-class="fade right" would do exactly the same, right?

[YamiOdymel]

The out and in are just a decoration class to make it _semantic-ize_,

and Semantic UI use the selector [class*=""] (for example: [class*="vertical flip in"]) to prevent the naming conflict (so vertical xx flip xxx in won't work),

and this issue will also occur on a ui right labeled icon button if I want to put a fade right (or fade in right) transition on it.

[LinusBorg]

_(Disclaimer: Bear with me, my CSS-wizardry is weak, and I have never worked with Semanti-UI so correct me if I'm wrong here)_

So Semantic-UI relies on the order of classnames? Sounds like a recipe for desaster in dynamic UIs.

To work, the section element would have to would look like this during leave transition:

class="out and cubic animated fade out right"

...which is not valid HTML. Furthermore, Vue uses classList.add() / remove(), so both ocurrences of out would be removed.

[YamiOdymel]

I think that I will change the naming convention of the animation from fade in right to fadeInRight to solve the problem temporary,

sorry for wasting your time, and thanks for the explanation :D

[LinusBorg]

No need to be sorry, Always glad to help :)