Добрый день разработчики У меня вопрос как настроить анимацию во 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,
}
}