javascript - 如何使用CSS同时滑动两个元素？

Question

我正在尝试创建一个带有 2 个按钮(向上和向下箭头)的 slider ，当用户单击向上箭头时， slider 中的当前元素(居中)向上滑动并淡出(即隐藏或不透明度变为0)，下一个元素从屏幕底部向上滑动，直到不透明度变为1。

但我似乎无法仅使用 CSS 使其工作。我设法使用 javascript (Vuejs) 复制了它，但效率很低。

<template>
  <transition appear>
    <div v-if="condition" class="trans-container">
      <slot></slot>
    </div>
  </transition>
</template>
<script>
  import velocity from 'velocity-animate'
  export default {
    name: "Slide",
    props: {
      condition: {
        default: true,
        type: Boolean
      },
      direction: {
        type: String
      }
    },
    methods: {
      // --------
      // ENTERING
      // --------

beforeEnter: function (el) {
        // el.style.opacity = 0
        Velocity(el, {
          translateY: this.direction === 'up' ? '100%' : '-100%',
          opacity: 0
        }, {
          duration: 300
        });
      },
      // the done callback is optional when
      // used in combination with CSS
      enter: function (el, done) {
        Velocity(el, {
          translateY: '0%',
          opacity: 1
        }, {
          duration: 300
        });
        // ...
        // done()
      },
      afterEnter: function (el) {

      },
      enterCancelled: function (el) {
        // ...
      },

      // --------
      // LEAVING
      // --------

      beforeLeave: function (el) {
        Velocity(el, {
          translateY: this.direction === 'down' ? '100%' : '-100%',
          opacity: 0
        }, {
          duration: 300
        });
        // ...
      },
      // the done callback is optional when
      // used in combination with CSS
      leave: function (el, done) {
        Velocity(el, {
          translateY: this.direction === 'down' ? '100%' : '-100%',
          opacity: 0
        }, {
          duration: 300
        });
        // ...
        // done()
      },
      afterLeave: function (el) {
        // ...
      },
      // leaveCancelled only available with v-show
      leaveCancelled: function (el) {
        // ...
      }
    }
  }
</script>
<style scoped>
  .trans-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    align-items: center;
  }
</style>

我只是无法使用 css 来完成。可能吗？

Answer 1

基本思路:

用户点击按钮后，附加类:

.disappear {
  transform: translate(0, -100px);
  transition: opacity 2s, transform 2s;
  opacity: 0
}

然后

window.setTimeout(function() { 
// set display to none, and then remove .disappear
}, 2000)

编辑:一些阐述

给每张幻灯片

transition: opacity 2s, transform 2s;

并将它们放置在(页面)中心。所有未显示的幻灯片都获得 .slidedBottom 类

使用以下类:

.slidedTop {
  transform: translate(0, -100px);
  opacity: 0;
}
.slidedBottom {
  transform: translate(0, 100px);
  opacity: 0;
}
.disappear {
  opacity: 0;
}
.appear {
  opacity: 1;
}
.hidden {
  display: none; // or use the hidden attribute
}

对于淡出(向上)的元素:

// add .disappear

window.setTimeout(function() { 
// remove disappear, add hidden, slidedTop
}, 2000)

淡入:

// remove hidden, slidedBottom, add appear
window.setTimeout(function() {
// remove appear
}, 2000)