Incorporate a variable into a CSS class

Currently, I am working on developing a component that creates an animation loop with a duration that is passed as a prop to the component.

The issue I am facing involves using CSS to create the animation:

animate:{
   -webkit-transition: 10.0s !important;
   -moz-transition: 10.0s !important;
   -o-transition: 10.0s !important;
   transition: 10.0s !important;
}

I would like to be able to include the duration directly in this class declaration, but it seems impossible. To work around this limitation, I am resorting to CSS techniques like those outlined in this article by CSS-Tricks, which involve adding a class to restart the animation.

Is there a way to initialize a class with variables in Vue.js or create a CSS animation loop with the duration as a parameter?

cssvue.jsvue-componentcss-animations

Answer №1

When it comes to CSS, it's anything but static if you leverage variables. Are you familiar with this technique?

:root{
   --primary-animation:10s;
}

animate:{
   -webkit-transition: var(--primary-animation) !important;
   -moz-transition: var(--primary-animation) !important;
   -o-transition: var(--primary-animation) !important;
   transition: var(--primary-animation) !important;
}

And how about integrating it into a component:

created(){
  document.documentElement.style.setProperty('--primary-animation', this.myCustomProperty+"s")

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to incorporate a delete button for each li element that is included in my list?

I have successfully implemented a to-do list where clicking on an item strikes a line through it and there is a delete button that works. However, I am looking for assistance on how to create a delete button for each newly added li item. var button = do ...

javascripthtmlcss

Implementing dynamic element selection with jQuery: combining onClick and onChange events

I am looking to update the appearance of the arrow on a select option. By default, it is styled as caret-down. When a user clicks in the input area, I want to change the style to caret-up. If the select option has been changed or no action has been taken, ...

javascripthtmljquerycss

Android Font Icon Spacing Issue with IconFont (Fontastic)

After using Fontastic.me to create an iconfont, I encountered an issue specifically with the native browser of Android 4.2.2 and 4.3 (such as modern Samsung tablets). In these browsers, the characters in the entire font appear to have no width. This proble ...

androidcssicon-fonts

Strategies for dynamically altering Vue component props using JavaScript

for instance: <body> <div id="app"> <ro-weview id="wv" src="http://google.com"></ro-weview> </div> <script> (function () { Vue.component("ro-webview", { props: ["src"], template: ` <input type="t ...

javascriptvue.js

A guide on showcasing items on an html webpage through the use of javascript

Currently, I have a series of hardcoded HTML elements in my code snippet. <!-- Reciever Message--> <div class="media w-50 ml-auto mb-3"> <div class="media-body"> ...

javascripthtmlcssbootstrap-4

implement adding a division element to the DOM using the append

I am facing an issue with this particular code. The intended functionality is to create multiple divs in a loop, but it seems to be dysfunctional at the moment. Upon clicking, only one div appears and subsequent clicks don't trigger any response. < ...

javascripthtmlcss

What is the best way to ensure that this image is responsive and not overly tiny when viewed on Internet Explorer

Check out my website: Here's a snapshot of the problem: I've been struggling to make my image responsive and prevent it from shrinking on IE 8. The webpage functions well on most modern browsers except for IE 8. I want it to display properly ac ...

htmlcssinternet-explorer-8responsive-design

Issues with iFrame Alignment

I recently created a digital catalog using FlipHTML5 and realized it needed to be more mobile-friendly. To address this issue, I included the following CSS: .size { width: 85vw; height: 75vh; Although this adjustment made the catalog display correctly on ...

htmlcssiframe

Issue with h2 tag within JQuery's read more feature

How can I modify my jQuery code to wrap the middle text in an h2 tag? I am currently using a code snippet from code-tricks. You can find the original code snippets here: $(document).ready(function() { var showChar = 100; var ellipsestext = "..."; ...

javascriptjqueryhtmlcss

Encountering an error: Vue full screen package throws a "this.$refs.fullscreen.toggle is not a function"

Hey everyone, I ran into an error message that says this.$refs.fullscreen.toggle is not a function while trying to integrate vue-fullscreen into my project. Below is the code snippet that is causing the issue. <template> <div id="app" ...

vue.jsfullscreen

Issues with div placement arise when incorporating relative positioning and floats

I have been attempting to position two divs with images next to the other divs but they appear underneath them instead. Can someone help me figure out what I am missing? FIDDLE CSS #main { margin: 0 auto; } #header { clear:both; float:left; ...

htmlcss

Unable to install vue-property-decorator

When attempting to set up Vue and TypeScript with class style using vue-property-decorator, I encountered a strange script after creating the project. I was anticipating a script like this: <script lang="ts"> import {Component, Vue} from & ...

javascripttypescriptvue.jsvuejs2

The communication factor that triggers the expansion of the mother element

I've been struggling with this issue for quite some time. Here is the challenge at hand: I am in the process of developing a library to streamline AJAX calls and neatly display error messages directly within a form. The dilemma: Whenever the messag ...

htmlcss

Next.js and Material UI - issues with dynamic styles not functioning

I recently started using Next JS in combination with Material UI, following the example project setup provided in the documentation on Github: https://github.com/mui-org/material-ui/tree/master/examples/nextjs My main objective is to utilize Material UI&a ...

javascriptcssmaterial-uinext.js

Fetching Results from Promise

Repeatedly, this question has been asked in various forms but I still do not understand: I have a resolved promise with a value. When I console.log this object, everything appears to be functioning correctly. I can see exactly what I want to see. My setu ...

javascriptvue.jspromise

The functionality of the Vue.js single file component is not performing as anticipated

Recently, I've been experimenting with Vue and Vue CLI. I came across this amazing vue-tabs-component that I would like to try out. Here is a snippet of my code from App.vue: <template> <div> <tabs> <tab name="Fir ...

javascriptvue.jsvuejs2

Pressing the menu button will trigger a function that halts after the third click

As I attempted to implement the functionality of this left menu bar, I encountered a roadblock. The click event on the menu button seems to work fine initially - the left bar appears with the first click and closes as expected with the second click. Howeve ...

javascripthtmlcssloopsaddeventlistener

Adding Typescript to a Nativescript-Vue project: A step-by-step guide

Struggling over the past couple of days to configure Typescript in a basic template-generated Nativescript-Vue project has been quite the challenge. Here's my journey: Initiated the project using this command: ERROR in Entry module not found: Erro ...

typescriptvue.jsnativescriptnativescript-vue

Using the "unicode-range" property for numerical values

Having incorporated a custom font using @font-face, I am attempting to showcase text in two different languages on a webpage with distinct fonts utilizing the font-face at rule in CSS and employing the unicode-range property. While the text appears corre ...

htmlcsslocalizationfont-facenumber-formatting

The alignment of a background image in CSS is different from using margin:0 auto, especially when dealing with scrollbars

Check out the following link to view the issue: http://jsfiddle.net/7zb6P/1/ In a scrolling div, both the yellow box and the background image are centered, however their centers appear slightly different. The discrepancy seems to be because the background ...

htmlcss