延迟更改样式

Question

我想在单击按钮后延迟切换 div 的样式。

如果我只是简单地使用 this.customEffect = 'blueborder'; 之类的东西而没有超时，代码将工作正常。

new Vue({
  el: '#app',
  data: {
    customEffect: ''
  },
  methods: {
    start: function() {
      setTimeout(function() {
        this.customEffect = 'blueborder';
      }, 1000);
      setTimeout(function() {
        this.customEffect = 'redtext';
      }, 2000);
    }
  }
});

.blueborder {
  border: 3px solid blue;
}

.redtext {
  color: red;
}

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="app">
  <div>
    <button @click="start">Start</button>
    <div :class="customEffect">Some text</div>
  </div>
 </div>

Answer 1

我认为您遇到的问题是超时中的 this 上下文是匿名函数的，而不是父对象。您可以使用箭头函数或显式绑定。

new Vue({
  el: '#app',
  data: {
    customEffect: ''
  },
  methods: {
    start: function() {
      setTimeout((function() { //BIND
        this.customEffect = 'blueborder';
      }).bind(this), 1000);
      setTimeout(() => { //OR =>
        this.customEffect = 'redtext';
      }, 2000);
    }
  }
});

.blueborder {
  border: 3px solid blue;
}

.redtext {
  color: red;
}

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="app">
  <div>
    <button @click="start">Start</button>
    <div :class="customEffect">Some text</div>
  </div>
 </div>

编辑推荐学习资源

this 在 JS 中可能会变得非常棘手。如果你想了解更多我强烈推荐相关的You Don't Know JS book by Getify This & Object Prototypes

Answer 2

您可以使用 boostrap 来避免编写已经具有 boostrap 功能的代码。

或者你可以让你拥有 css 类:

例如：

.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.fast {
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

@keyframes fadeIn {
from {
  opacity: 0;
}

to {
  opacity: 1;
}
}

.fadeIn {
animation-name: fadeIn;

html 示例：

<div class="animated fadeIn fast">
  <h1 class="display-4">My app</h1>
  <p class="lead">This is a great app!</p>
<div>

Answer 3

可以使用lodash的debounce方法。 https://lodash.com/docs/#debounce

 methods: {
        start: _.debounce(function() {
            this.customEffect = (this.customEffect == 'redtext')?'blueborder':'redtext';
        },1000)
      }

在你需要导入 lodash 之前

延迟更改样式

Changing styles with delay

html

javascript

css

vue.js

vuejs2