[Vuejs]-Vue.js precise CSS class toggling for CSS animation retriggering

by

0👍

✅

One solution is to not clear the class before reapplying it, but to replace it with another one which has identical animation properties.

<q-icon
  color='grey-7'
  :name="connectionStateIcon"
  class="icon-reconnect"
  :class='[$storage.state.websocket.state, reconnect_pulse]'></q-icon>

data: function () {
  return {
    reconnect_pulse: '',
  }
},
created() {
  this.$eventbus.$on('connection-state', (state) => {
    if (state == 'reconnecting') {
      if (this.reconnect_pulse != 'reconnect-pulse-tick') {
        this.reconnect_pulse = 'reconnect-pulse-tick'
      }
      else {
        this.reconnect_pulse = 'reconnect-pulse-tock'
      }
    }
  })
},

@keyframes reconnect-pulse-tick {
  from { color:#ffa000; } to { }
}
.q-icon.reconnect-pulse-tick {
  animation: reconnect-pulse-tick 2.0s ease-in;
}

@keyframes reconnect-pulse-tock {
  from { color:#ffa000; } to { }
}
.q-icon.reconnect-pulse-tock {
  animation: reconnect-pulse-tock 2.0s ease-in;
}

.q-icon.icon-reconnect { }  /* "grey-7" is default base color */

.q-icon.icon-reconnect.open {
  color: yellowgreen; /* when the connection is established, select green as the base color */
}

In this case it’s important that the animation keyframes also have different names, as shown in the css code above.

TBH, I actually prefer this solution much more to the one which attempted to use nextTick or setTimeout.

Leave a comment