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

【问题标题】：How to access scoped keyframes from JS如何从 JS 访问作用域关键帧
【发布时间】：2019-10-10 07:17:06
【问题描述】：

我有一个名为 move-left 的作用域“关键帧”，我必须在 JS 中访问它，但是如何？我试图删除作用域，它会起作用，但我希望它是作用域的，我怎样才能访问它
你知道，vue-loader 会给左移添加随机哈希，类似于 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>

【问题讨论】：

可以使用 CSS 模块来实现。见App.vuecodesandbox.io/s/vue-template-nlizo
@JacobGoh 所以我需要使用 CSS 模块而不是作用域 CSS，对吧？
是的。如果您想将 Scoped CSS 用于其他用途，您可以在一个组件中使用多个 <style> 块。
@JacobGoh 谢谢！请发布一个答案，以便我可以接受你
我不能..大声笑..这个问题没有打开...没关系

标签： css vue.js vuejs2 vue-component

【解决方案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>

【讨论】：