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来实际创建过渡。例如这样的内容（来自docs）：

.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)
}

Vue淡入淡出过渡功能

1 个答案: