如何使用 Vue.js 滑动转换两个块？答案

【问题标题】：How to slide-transition two blocks with Vue.js?如何使用 Vue.js 滑动转换两个块？
【发布时间】：2018-06-28 05:13:20
【问题描述】：

我正在尝试编写一个 Vue.js 过渡，它可以滑出一个元素，同时滑入另一个元素。我几乎让它工作了，但是当动画开始时元素会相互碰撞。

这是我的CodePen 和代码：

// pug/jade
#app
  .elems
    transition-group(name="elem")
      li.elem(v-for="(elem, index) in elems" 
        v-if="index === currentElem" 
        @click="currentElem = currentElem === 0 ? 1 : 0" :key="index") {{ elem 

// stylus
.elems
  display: flex
  align-items: center
  justify-content: center
  height: 100vh
  position:relative

.elem
  display: block
  text-align: center
  font-size: 30px
  padding: 30px
  border-radius: 20px
  border: 2px solid black
  user-select: none
  cursor: pointer

  &-enter-active, &-leave-active
    transition: 1s

   &-enter
     transform: translateX(-100vw)

   &-leave-to
     transform: translateX(100vw)


// js
new Vue({
  el: '#app',
  data() {
    return {
      elems: ['hello there', 'hello yourself'],
      currentElem: 0
    }
  }
})

【问题讨论】：

尝试将过渡模式设置为out-in。将 .elem 上的显示设置为 inline-block 也会停止升档。
@btl 这几乎可以正常工作，但在动画结束时它会弹回原位。有没有办法解决这个问题？

标签： vue.js css-transitions

【解决方案1】：

您需要 .elem 的绝对位置，因为我了解您想要什么。否则他们不能相撞试试这个 CSS：

.elems
  display: flex
  align-items: center
  justify-content: center
  height: 100vh
  width: 100vw
  position: relative
  overflow: hidden

.elem
  display: block;
  position: absolute
  top: 50%;
  left: 50;
  margin-top: -30px;
  margin-left: -150px
  text-align: center
  width: 300px
  height: 60px
  line-height: 60px
  vertical-align: middle
  font-size: 30px
  border-radius: 20px
  border: 2px solid black
  user-select: none
  cursor: pointer

  &-enter-active, &-leave-active
    transition: 1s

   &-enter
     transform: translateX(-100vw)

   &-leave-to
     transform: translateX(100vw)

【讨论】：

很好，有两件事：1) left 应该是 50% 吗？ 2) 有什么方法可以更精确地定义上边距和左边距吗？
如果你想让它居中而不知道你可以离开的宽度和高度：50%；最高：50%；变换：translateX (-50%) 变换：translateY (-50%)