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

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]

(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 😄