Donnie Donnie - 1 year ago 125
Sass (Sass) Question

Vue Transition Not Affecting Each Element

I have a container with two elements that I would like to toggle with a click.

I'd like to have the visible element slide out while the new element slides in, but the transition only affects the first child (i.e. logo) while the second child (i.e. version) does a simple show/hide. Switching the order of the children doesn't help.

Markup in component.vue

<div class="brand-container" @click="toggleLogoBox">
<div class="logo" v-show="logoVisible" transition="slide">
<img src="../assets/images/logo.svg">
<div class="version" v-show="versionVisible" transition="slide">
<div class="label">Motor Club</div>
<div class="number">{{ version }}</div>
</div> <!-- brand-container -->

Logic in component.vue

methods: {
toggleLogoBox: function () {
this.logoVisible = !this.logoVisible;
this.versionVisible = !this.versionVisible;
// ...


.slide-transition {
transition: all .4s cubic-bezier(.25,.1,.25,1);

.slide-enter {
transform: translate3d(25%, 0, 0);
opacity: 0;

.slide-leave {
transform: translate3d(-25%, 0, 0);
opacity: 0;

Answer Source

It turns out that this was not an issue of transitions, but of the child elements not having the position: absolute; top: 0; left: 0; properties, so that the transitions on each element could be seen from beginning to end.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download