[Vuejs]-How to access scoped keyframes from JS

by

0👍

✅

it can be achieved using CSS module. see App.vue in 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>

Leave a comment