Блог

У меня есть настройка системы вкладок с 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;
}
  

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

Спасибо

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

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

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