Ways to retrieve targeted keyframes using JavaScript

Question

Ways to retrieve targeted keyframes using JavaScript

Trying to access a scoped "keyframes" named move-left in JavaScript. How can I do this while keeping it scoped? Note that vue-loader will add a random hash to move-left, such as 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 vue.js vuejs2 vue-component

Answer 1

Answer №1

To achieve this effect, you can utilize a CSS module. Check out the code in the App.vue file on this link.

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

Answer 2

To achieve this effect, you can utilize a CSS module. Check out the code in the App.vue file on this link.

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

Ways to retrieve targeted keyframes using JavaScript

Answer №1

Similar questions

Is there a way for me to retrieve the icons through a content query?

When you hover over the Dropdown Menu, the Hoverable Dropdown Menu will automatically close

Learn the process of dynamically wrapping component content with HTML tags in Vue.js

Transitioning to mui5's sx prop instead of makeStyles is generating a typescript error - none of the overloads match this call when passing an object with

Looking to incorporate multiple accordion drop down menus on your website? Utilize a combination of HTML, CSS, and JavaScript to

Creating Responsive Headers Using CSS for Mobile Devices

Incorporate a smooth infinite scroll feature in a CSS carousel that seamlessly loops without

How can I clear all jQuery toggled classes that have been added across the entire webpage in an Angular project?

Mysterious CSS "manifestation" perplexes Chrome while evading Firefox's gaze

Floating divs failing to clear properly in Internet Explorer

CSS: The enigma of :nth-child - what eludes my understanding?

Can a placeholder dropzone be created at the bottom of Vue Draggable lists?

I can't seem to get my SCSS files to load properly on GitHub HTML pages, and I

Can someone please help me figure out why the "setInterval" function in my script isn't functioning as expected?

Implement the Vue.js @click directive in a location outside of an HTML element

Dynamically Alter Notification Background

Unnecessary additional spacing caused by inline blocks in Firefox

Tips for transforming a JSON response into an array with JavaScript

Adjust the Vue.js required property to allow null values but not undefined

Spinning an object using JQuery