如何使用Vue.js滑动转换两个块?

时间:2018-01-19 01:50:16

标签: vue.js css-transitions

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

enter image description here

这是我的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
    }
  }
})

1 个答案:

答案 0 :(得分:2)

你需要.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)