Как получить доступ к ключевым кадрам в JS

Question

У меня есть определенные ключевые кадры с именем move-left, я должен получить к ним доступ в JS, но КАК? Я попытался удалить область действия, она будет работать, но я хочу, чтобы она была определена, как я могу получить к ней доступ
вы знаете, vue-loader добавит случайный хеш для move-left, что-то вроде move-left-xxxxxxxxx

<template>
  <div :style="{animation: animation}"></div>
</template>

<script>
      this.animation = "move-left linear 10s"  /// how to access move-left here
</script>

<style scoped>
  @keyframes move-left {
    from {
      transform: translateX(100vw);
    }
    to{
      transform: translateX(-150vw);
    }
  }
</style>

Answer 1

это может быть достигнуто с помощью модуля CSS.см. App.vue в https://codesandbox.io/s/vue-template-nlizo

<template>
  <div id="app">
    <div :style="{animation: animation}">123</div>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  data() {
    return { animation: `${this.$style["move-left"]} linear 10s` };
  }
};
</script>

<style module>
@keyframes move-left {
  from {
    transform: translateX(100vw);
  }
  to {
    transform: translateX(-150vw);
  }
}
</style>