Vue.js добавить класс для исчезновения с v-if

Question

У меня есть настройка системы вкладок с Vue.js, и она работает хорошо. Моя единственная проблема заключается в том, что добавление классов для затухания в непрозрачности, похоже, не работает с моими атрибутами v-if:

Мой HTML и JS

<div id="tabs" class="tabs-container">

    <div class="tabs">
        <a v-on:click="activetab=1" v-bind:class="[ activetab === 1 ? 'active' : '' ]">Tab 1</a>
        <a v-on:click="activetab=2" v-bind:class="[ activetab === 2 ? 'active' : '' ]">Tab 2</a>
        <a v-on:click="activetab=3" v-bind:class="[ activetab === 3 ? 'active' : '' ]">Tab 3</a>
    </div>

    <div class="content">
        <div v-if="activetab === 1" v-bind:class="[ activetab === 1 ? 'tabcontent fadedIn' : '' ]">
            Content for tab one
        </div>
        <div v-if="activetab === 2"  v-bind:class="[ activetab === 2 ? 'tabcontent fadedIn' : '' ]">
            Content for tab two
        </div>
        <div v-if="activetab === 3"  v-bind:class="[ activetab === 3 ? 'tabcontent fadedIn' : '' ]">
            Content for tab three
        </div>
    </div>

</div>

<script type="text/javascript">
new Vue({
    el: '#tabs',
    data: { activetab: 1 },
});


</script>

А вот и мой CSS:

.tabcontent {
  opacity: 0;
   transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
   -webkit-transition: opacity 1s ease-in-out;
}

.tabcontent.fadedIn {
    opacity: 1;
}

Я не уверен, что делаю неправильно, но что-то подсказывает мне, что я очень близок. Есть ли лучший способ сделать это?

Спасибо

Answer 1

Я почти уверен, что проблема в том, что HTML-тег (<a> в данном случае) необходимо сначала добавить в DOM (т. Е. V-if = true), затем вам нужно добавить класс css натот элемент, который запускает исчезновение.

Вы заставляете оба происходить одновременно (вставка в DOM с классом fadeIn), и это закорачивает эффект перехода и просто показывает его как видимый.

Использование средств перехода vue (как указано в комментарии @MatheusValenza) - это один из способов применения класса css отдельно после вставки DOM.