Make div follow slide transition in vue

Question

When using transitions and v-if, it seems that the div is created and then animation happens within that div. Is it possible to make div follow the text during the animation?

Example provided, when clicking on the button, the button jumps to side and then text slides into meet it. What I'm aiming for is the button to slide with text when button is clicked.

Example: https://codepen.io/tadhglydon/pen/WNyVQZa

<div id="app">
    <div class="container"><div class="filler"></div>
        <button v-on:click="SlideIn">Test</button>

        <transition name="slide">
            <div v-if="toggle">Status update</div>
        </transition>
    </div>
</div>

.container {
    width: 200px;
    height: auto;
    display: flex;
}

.filler{
    flex-grow: 1;
}
.slide-leave-active,
.slide-enter-active {
    transition: 1s;
}
.slide-enter {
    transform: translate(100%, 0);
}
.slide-leave {
    transform: translate(-100%, 0);
}

var app = new Vue({
    el: "#app",

    data: {
        toggle: false
    },
    methods: {
        SlideIn: function () {
            this.toggle = !this.toggle;
        }
    }
});

`` is a Vue-provided component for animating elements _*only*_ when entering or leaving the DOM. Since the button isn't doing either you'll need to develop an animation using normal CSS — yoduh, Dec 15 '22 at 16:19

score 0 · Answer 1 · answered Dec 21 '22 at 12:33

Fixed this by using CSS and letting Vue controlling the transitions.

In the HTML I have

<div class="slider" :class="toggle ? 'slided' : ''">

And then in the CSS I have:

.slider {
  width: 0px;
  overflow: hidden;
  transition: width 900ms ease;
  -moz-transition: width 900ms ease;
  -ms-transition: width 900ms ease;
  -o-transition: width 900ms ease;
  -webkit-transition: width 900ms ease;
}

.slided {
  width: 100px;
}

Make div follow slide transition in vue

1 Answers1