Изменение стилей с задержкой

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

Вы можете использовать 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 2

Вы можете использовать метод debounce из lodash.https://lodash.com/docs/#debounce

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

, прежде чем импортировать lodash

Answer 3

Я думаю, что проблема, с которой вы сталкиваетесь, заключается в том, что контекст 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 Not Know JS от Getify Прототипы This & Object