当另一个元素消失时转换元素

Question

＆＃13;

＆＃13;

new Vue({
  el: '#app',
  data: {
    visible: true
  }
})

＆＃13;

.a, .b {
  height: 50px;
  width: 50px;
  background: red;
}

.b {
  background: blue;
  transition: 1s;
}

＆＃13;

<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>
<div id="app">
  <div class="a" v-if="visible" @click="visible = false"></div>
  <div class="b"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

如何让第二个元素（蓝色）转换到动画中的上部位置而不是立即转换？

Answer 1

通过动画减少高度来隐藏红色div。

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/vue@2.4.4/dist/vue.js"></script>
<div id="app">
  <div class="a" v-if="visible" @click="hide"></div>
  <div class="b"></div>
</div>