Как сдвинуть два элемента одновременно с помощью CSS? - PullRequest
Новая
       7

Как сдвинуть два элемента одновременно с помощью CSS?

0 голосов
/ 17 сентября 2018

Я пытаюсь создать ползунок с 2 кнопками (стрелки вверх и вниз), когда пользователь нажимает стрелку вверх, текущий элемент (который центрирован) в ползунке скользит вверх и исчезает (т.е. скрывает или прозрачность становится 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. Возможно ли это?

1 Ответ

0 голосов
/ 17 сентября 2018

Основная идея:

После того, как пользователь нажмет на кнопку, прикрепите класс: 

.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)

Fadeв: 

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