Question

我正在尝试使用vue docs上的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;
}

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

P.S。我还应该提一下，这个项目使用的是Vuetify，我觉得它不会对任何事情产生任何影响，但它可能是个好消息。

Vue.Js过渡不起作用

0 个答案: