Question

我有一个名为“ move-left”的作用域“关键帧”，我必须在JS中访问它，但是怎么办？我尝试删除中的作用域，它将起作用，但我希望将其作用域化，如何访问它
您知道，vue-loader会将随机哈希添加到“向左移动”，类似于“向左移动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模块来实现。参见https://codesandbox.io/s/vue-template-nlizo

中的App.vue

<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>

如何从JS访问作用域关键帧

1 个答案: