CODEWITHSUNDEEP
javascriptvue.js
Zikero
Zikero

Reputation: 15

Transition an element when another one disappears

new Vue({
  el: '#app',
  data: {
    visible: true
  }
})
.a, .b {
  height: 50px;
  width: 50px;
  background: red;
}

.b {
  background: blue;
  transition: 1s;
}
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <div class="a" v-if="visible" @click="visible = false"></div>
  <div class="b"></div>
</div>

How to make the second element (blue) transition to the upper position in an animation rather than instantly?

Upvotes: 1

Views: 79

Answers (1)

Niklesh Raut
Niklesh Raut

Reputation: 34914

Hide red div by reducing height with animation.

new Vue({
  el: '#app',
  data: {
    visible: true
  },
  methods:{
    hide: function(){
      document.querySelector(".a").style.height = "0px";
      console.log(document.querySelector(".a").style.width);
    }
  }
})
.a, .b {
  height: 50px;
  width: 50px;
}

.a{
  background: red;
  transition: 1s;
}

.b {
  background: blue;
}
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <div class="a" v-if="visible" @click="hide"></div>
  <div class="b"></div>
</div>

Upvotes: 1

Related Questions