transition toggle between divs in vue js

Question

I am trying to apply toggle between divs. But I couldn't make it happen. I know I can't put two elements inside the transition. I need to a transition-group for that. But when I use group, then it says bind the elements inside group. But I am not looping the elements... So I am a bit stuck about solving this...

template

<div>
    <transition name="view">
        <map-view 
            v-show="this.screenView == 'map'" 
            :changeView="changeView" />    
        <list-view 
            v-show="this.screenView === 'list'"
            :changeView="changeView" />               
    </transition>            
</div>

script

methods: {
    changeView(screen){
        this.screenView = screen;
    }
}

styles

.view-enter-active, .view-leave-active {
  transition: opacity .5s
}
.view-enter, .view-leave-to {
  opacity: 0
}

By the way changeView() is working. No problem about that part. Just trying to toggle between divs.

The key can be any static value. key="map", key="list". It doesn't matter. Or you can use transition and v-if. — Steven B.
– Steven B., Commented Dec 10, 2019 at 5:03
If I give different keys to elements then second elements doesn't take any effect from transition... the first element(map) is fine though... something is off... @StevenB. — yvl
– yvl, Commented Dec 10, 2019 at 5:14
Thank you for the advice and also fiddle. I just did the same thing and it's working now. @StevenB. — yvl
– yvl, Commented Dec 10, 2019 at 5:32

yvl · Accepted Answer · 2019-12-10 05:41:52Z

1

Thanks to advice in the comments.

I tried to give different keys to elements.

    <transition-group name="view">
        <map-view 
            key="maps"
            v-show="this.screenView == 'map'" 
            :changeView="changeView" />    
        <list-view 
            key="list"
            v-show="this.screenView === 'list'"
            :changeView="changeView" />               
    </transition-group>

and changed the styles like below.

.view-enter-active, .view-leave-active {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease;
}
.view-enter-active {
    transition-delay: 0.5s;
}

.view-enter, .view-leave-to {
  opacity: 0;
}

.view-enter-to, .view-leave {
  opacity: 1;
}

It's working now.

edited Dec 10, 2019 at 5:41

answered Dec 10, 2019 at 5:31

yvl

67013 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

transition toggle between divs in vue js

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