Vue transition with v-if and v-else not working

Question

I cant add animation using transition or transition-group. I have code:

    <transition mode="out-in" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
        <div key=1 v-if="$route.name !== null">
            <router-view></router-view>
        </div>
        <div v-else key=2>
            <p>First text</p>
            <p>Second text</p>
        </div>
    </transition>

the change does not help from transtition to transition-group. Transition should surround:

<div v-if="$route.name !== null">
   <router-view></router-view>
</div>

and

<p>First tex</p>
<p>Second text</p>

I want to confirm that you do see "First text" and "Second text" without the animation, since null is quite an odd thing to have as a name. I would expect it to be either undefined or a string. — Sumurai8
– Sumurai8, Commented Jan 3, 2019 at 19:50

major697 · Accepted Answer · 2019-01-03 20:34:02Z

2

I found solution. I used transition two times. I do not know if I should do it, but it works now.

    <transition mode="out-in" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
        <div key="save" v-if="$route.name !== null">
             <transition mode="out-in" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
            <router-view></router-view>
            </transition>
        </div>
        <div v-else key="edit">
           <p>First tex</p>
           <p>Second text</p>
        </div>
    </transition>

edited Jan 3, 2019 at 20:34

answered Jan 3, 2019 at 20:18

major697

1,8629 gold badges33 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue transition with v-if and v-else not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related