超时功能上的Vue淡入淡出过渡

Question

我正在使用setTimeout 函数来更新现有的{{title}} 文本。我了解添加淡入淡出过渡的常规方法是将其包裹在 {{title}} 周围，例如：

<transition name="fade"> {{title}} </transition>

但是，由于标题正在 cycle 函数中更新，我该如何添加淡入淡出过渡？

created: function created() {
  var self = this

      setTimeout(function cycle() {

        self.title = self.posts[self.currentIndex++].title

        self.currentIndex %= self.posts.length

        setTimeout(cycle, 3000)
      }, 5000)

},

Answer 1

从您的代码中很难看出，但我最好的猜测是您没有实现 CSS 来实际创建过渡。例如这样的事情（来自文档）：

.fade-enter-active, .fade-leave-active {
  transition: opacity 5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

如果您添加 CSS，它应该完全按照您的描述工作。更多信息在这里：https://vuejs.org/v2/guide/transitions.html

还有，你不是这个意思吗？

methods: {
    updateTitle() {
        this.title = this.posts[this.currentIndex++].title
        this.currentIndex %= this.posts.length
    }
},
created() {
  setTimeout(() => {
    this.updateTitle()
    setInterval(() => {
        this.updateTitle()
    }, 3000)
  }, 5000)
}