Анимация по клику на кнопки контента?

Question

Добрый день разработчики У меня вопрос как настроить анимацию во Vue При переключении кнопок есть баг - задержки где показывает старый блок Вообщем прикрепил Анимая проста - показывать по клику на кнопки с opacity и transition

<div class="container-wrapper">
        <div class="d-flex flex-start">
            <button id="btn-active-ticket" @click="showActive = true"
                    :class="{'green': showActive}" >Активні</button>
            <button id="btn-archive" @click="showActive = false"
                    :class="{'green': !showActive}" >Архів</button>
        </div>
        <transition name="component-fade" mode="out-in">
            <div class="d-flex flex-wrap" v-if="showActive">
               <div>CONTENT</div>
            </div>
        </transition>
        <div v-if="!showActive">
            <transition name="component-fade" mode="out-in">
                <div class="text-left">CONTENT</div>
            </transition>
        </div>
    </div>

Стили

.link-ticket {
    text-decoration: underline;
    color: #31353D;
}
.link-ticket:hover {text-decoration: none; color: #31353D;}
body { background: #eff4f4;  }
.green {  background: #81E15B;}
.container-wrapper {
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
}
.title-bur {
    font-family: "MuseoSansCyrl_2";
    font-size: 24px;
    line-height: 29px;
    color: #484848;
}
#btn-active-ticket {
    margin-right: 20px;
    width: 150px;
    height: 40px;
    border-radius: 5px;
    font-family: "MuseoSansCyrl_0";
    font-size: 18px;
    line-height: 18px;
    text-align: center;
    border: 0;
}
#btn-archive {
    width: 150px;
    height: 40px;
    border: 0;
    font-family: "MuseoSansCyrl_0";
    font-size: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 5px;
}
.show-more-link a:hover {
    text-decoration: none;
}
.show-more-link a{
    text-decoration: underline;
    font-family: "MuseoSansCyrl_1";
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 18px;
    color: #499625;
}
.component-fade-enter-active {
    transition: .2s;
}
.component-fade-leave-to
    /* .component-fade-leave-active for <2.1.8 */ {
    opacity: 0;
}

Модель data

 data() {
    return {
       //button
         showActive: true,
         isActive: true,
         isArhive: false,
        }
    }

Answer 1

Вам нужно использовать конструкцию - Переходы между элементами: Используя компонент-обертку <transition> общий для возможных вариантов, как:

    <transition name="component-fade" mode="out-in">
      <div key="show" v-if="showActive" class="d-flex flex-wrap">
        <div>CONTENT</div>
      </div>
      <div key="hide" v-else>
        <div class="text-left">CONTENT2</div>
      </div>
    </transition>

Обратите внимание на наличие key для обоих корневых div. Это обусловлено следующим:

При переключении между элементами, использующими одноимённые теги, нужно указать Vue, что это различные элементы, установив уникальные значения атрибута key. В противном случае компилятор Vue из соображений эффективности только поменяет содержимое элемента. Несмотря на отсутствие технической необходимости, считается хорошим тоном всегда указывать атрибут key у множественных тегов в компоненте .

Более подробно об анимации во Vue - Vue transitions

Ваш рабочий пример:

new Vue({
  el: '#app',
  data() {
    return {
      //button
      showActive: true,
      isActive: true,
      isArhive: false,
    }
  }
})

.link-ticket {
  text-decoration: underline;
  color: #31353D;
}

.link-ticket:hover {
  text-decoration: none;
  color: #31353D;
}

body {
  background: #eff4f4;
}

.green {
  background: #81E15B;
}

.container-wrapper {
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
}

.title-bur {
  font-family: "MuseoSansCyrl_2";
  font-size: 24px;
  line-height: 29px;
  color: #484848;
}

#btn-active-ticket {
  margin-right: 20px;
  width: 150px;
  height: 40px;
  border-radius: 5px;
  font-family: "MuseoSansCyrl_0";
  font-size: 18px;
  line-height: 18px;
  text-align: center;
  border: 0;
}

#btn-archive {
  width: 150px;
  height: 40px;
  border: 0;
  font-family: "MuseoSansCyrl_0";
  font-size: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 5px;
}

.show-more-link a:hover {
  text-decoration: none;
}

.show-more-link a {
  text-decoration: underline;
  font-family: "MuseoSansCyrl_1";
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 18px;
  color: #499625;
}

.component-fade-enter-active {
  transition: all .2s;
}

.component-fade-enter,
.component-fade-leave-to
/* .component-fade-leave-active for <2.1.8 */

{
  opacity: 0;
  transform: translateY(-10px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <div class="container-wrapper">
    <div class="d-flex flex-start">
      <button id="btn-active-ticket" @click="showActive = true" :class="{'green': showActive}">Активні</button>
      <button id="btn-archive" @click="showActive = false" :class="{'green': !showActive}">Архів</button>
    </div>
    <transition name="component-fade" mode="out-in">
      <div key="show" v-if="showActive" class="d-flex flex-wrap">
        <div>CONTENT</div>
      </div>
      <div key="hide" v-else>
        <div class="text-left">CONTENT2</div>
      </div>
    </transition>
  </div>
</div>

БЛОГ НА HUSL

Анимация по клику на кнопки контента?

Ответы (1 шт):