Плавный перевод перевода между двумя элементами - PullRequest
Новая
       22

Плавный перевод перевода между двумя элементами

0 голосов
/ 04 декабря 2018

Я работаю над анимацией Vue, где:

  • Кнопка # 1 выдвигается влево.
  • Кнопка # 2 сдвигается вправо.

И наоборот.

Однако, когда я инициирую переход, кнопка # 2 вставляется в DOM и сразу же нажимает кнопку # 1 вправо, где # 1 затем начинает свой переход.

Вот мой компонент: 

<transition name="detail">
    <div class="u-align-center" v-if="showShare">
        <button class="btn btn-wide u-ml-20 u-mr-40 u-align-center u-text-blue">
            Sample Button
        </button>
    </div>
</transition>
<transition name="detail">
    <div class="u-align-center u-ml-20 u-mr-40" v-if="!showShare">
        <button class="btn btn-blue u-mr-20 u-align-center" @click="showDetail = !showDetail" v-if="!showDetail">
            See List
        </button>
        <button class="btn btn-blue u-align-center u-mr-20" @click="showShare = !showShare" v-if="!showShare">
            Take With You
        </button>
    </div>
</transition>

А вот мой CSS: 

.detail-enter {
    transform: translateX(-2500px);
}

.detail-enter-to {
    transform: translateX(0px);
}

.detail-leave {
    transform: translateX(0px);
}

.detail-leave-to {
    transform: translateX(-2500px);
}

.detail-leave-active {
    transition: all 1s cubic-bezier(.42,0,.58,1);
}

.detail-enter-active {
    transition: all 1s cubic-bezier(.42,0,.58,1);
    transition-delay: .75s;
}

Вот GIF-файл именно того, что я испытываю:

https://www.dropbox.com/s/9vg7c9mrvxt5pyr/gif.gif?dl=0

Есть ли способ сделать это с помощью Vue Transitions?Я читал о режимах перехода , которые, кажется, делают именно то, что мне нужно, но я не могу заставить их вести себя в этом контексте.

...