如何使用css同时向上滑动两个元素？

Question

我正在尝试创建一个带有 2 个按钮（向上和向下箭头）的滑块，当用户单击向上箭头时，滑块中的当前元素（居中）向上滑动并淡入淡出（即隐藏或不透明度变为 0)，下一个元素从屏幕底部向上滑动，直到 opacity 变为 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)