小编Eli*_*ine的帖子

我超级坚持创建这种类型的按钮效果。我想让我的主按钮在单击时“拆分”为两个新按钮。我在这里拼凑了我对 codepen 的最佳尝试http://codepen.io/bananahavana/pen/LbpRqp（不要笑！）

$('.button1').click(function() {
  $('.button1').addClass('clicked');
  $('.reveal').addClass('opened');
});

.container {
  text-align: center;
  background: blue;
  position: relative;
  width: 400px;
  height: 50px;
}
a {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  display: inline-block;
  width: 80px;
  color: white;
  overflow: hidden;
  text-decoration: none;
  background: #cc0066;
  padding: 1rem 2em;
  border-radius: 5px;
}
.clicked {
  width: 0;
  padding: 1rem 0rem;
  transition: all 0.5s ease-in-out;
  display: flex;
  justify-content: space-between;
}
.button2,
.button3 {
  width: 0;
  padding: 1rem 0rem;
}
.opened {
  width: 80px; …

我有一个简单的问题.我正在建立一个使用vue垂直旋转的旋转木马.当用户单击前进按钮时,我希望vue使用我的"前进"过渡(向下移动)来转换元素.当用户单击向后按钮时,我希望vue使用我的"向后"转换(向上移动)来转换元素.

现在,我只有一个转换执行我的前向转换,无论用户是向前还是向后导航.

有没有办法实现这个目标？

继承我的组成部分:

<template>
<div class="carousel__container">
    <div class="carousel__visible">
        <div class="carousel__slides">

            <transition-group name="carouselNext">
                <div v-for="(quote, index) in quotes" class="carousel__slide" key="index" v-show="index === currentSlide">
                    <blockquote>{{ quote.quote }}</blockquote>
                    <cite>{{ quote.cite }}</cite>                   
                </div>
            </transition-group>

        </div>


    </div>

    <button class="btn btn--alt" @click="prev">Back</button>

    <button class="btn btn--primary" @click="next">Next</button>
</div>

谢谢!