Как сделать анимацию слайдов через vue.js и flexbox? - PullRequest
Новая
       20

Как сделать анимацию слайдов через vue.js и flexbox?

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

Я хочу сделать слайд анимацию через vue.js.Я не хочу использовать position:absolute, потому что это требует фиксированной высоты.

Как правильно сделать это через display:flex?

Прямо сейчас это выглядит ужасно - https://jsfiddle.net/mezhevikin/eywraw8t/358967/.

html: 

<div id="app">
    <div class="slider">
        <transition name="slide">
            <div class="text" :key="index">
                {{ items[index].text }}
            </div>
        </transition>
    </div>
    <a @click="next" href="#">Next</a>
</div>

css: 

 body {
    background-color: #cccccc;
}

#app {
    width: 200px;
    background-color: #ffffff;
    margin: 0 auto;
    padding: 10px;
}

.slider {
    overflow: hidden;
    display: flex;
}

.slide {
    width:100%;
}

.slide-leave-active,
.slide-enter-active {
  transition: 0.5s;
}

.slide-enter {
  transform: translate(100%, 0);
}

.slide-leave-to {
  transform: translate(-100%, 0);
}
...