我正在尝试使用位于vue docs（特别是"Slide Fade"）上的Vue过渡，以便为组件上的文本更改设置动画 . 我将此特定标记设置为在观察的计算属性从vuex存储返回时呈现 . 为了通过各种选项转换文本，我有一个递归超时函数，它将"showAnnouncement"属性设置为false，设置新文本，然后再次为true . 无论有没有过渡，这都能很好地工作 .

这是我的模板中的一个片段，显示了它的实际效果 .

<div class="announcements">
    <h2> Announcements </h2>
    <transition  name="slide-fade">
            <h3 v-if="showAnnouncement">
                <a :href="announcementCurrent.link" class="announcementLink">
                {{announcementCurrent.title}}
                </a> 
                - {{announcementCurrent.author}}
            </h3>
    </transition>
    <!--  -->
</div>

我采取的故障排除步骤之一是完全放弃vue过渡组件，并直接在类上设置CSS过渡 . 哪个失败了，所以我决定回到vue过渡的方块 .

以下是转换的CSS，直接从我上面链接的文档中提取：

.slide-fade-enter-active {
     transition: all .3s ease;
}
.slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
}

提前抱歉，如果间距有点偏，它似乎不想正确粘贴缩进 . 我现在有点不知所措，并提前感谢你的帮助 .

附：我还应该提一下，这个项目使用的是Vuetify，我认为它不会影响任何东西，但它可能会很好 .

vue.js