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触发淡入的元素上的类。

您将导致两者同时发生（通过使用fadeIn类插入DOM），这将使过渡效果短路，并将其显示为可见。

使用vue的转换工具（如@MatheusValenza在评论中指出的）是在插入DOM之后单独应用css类的一种方法。

Vue.js添加类以使用v-if淡入

1 个答案: