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

Stylish Tabbed Design

Imagine I have this html and css snippet h1{ color: rgb(61, 133, 200); font-size: 3em; margin-left: 0px !important; } h1 ~ *:not(h1) { margin-left: 0px; } h2{ font-size: 1.8em; margin-left: 40px !important; } h2 ~ *:not(h2) { ...

htmlcsslayout

Vue snapshot testing is encountering a failure with the error message "TypeError: Cannot read property of undefined"

Everything seems to be working fine with the component on the page without any errors. Storybook is also functioning well, but the problem lies in the unit test. import { mount } from '../../vue'; import { createLocalVue } from '@vue/test-u ...

javascriptvue.jsjestjs

CSS Float behaving unexpectedly

body { margin: 0; font-family: arial; line-height: 16px; } #topbar { background-color: #600c0c; width: 100%; height: 46px; color: white; margin: 0; } .fixedwidth { width: 1050px; margin: 0 auto; } #logodiv { padding-t ...

htmlcsscss-float

What is the best way to activate a scrollbar exclusively for the final section in fullpage.js?

Is there a way to enable a scrollbar for the last section only in fullpage.js? This is what I attempted: $("#section3").fullpage({ scrollBar: true, fitToSection: false, }); Unfortunately, it didn't work as expected. ...

jqueryhtmlcssfullpage.js

Best method for connecting user input with a class

I'm currently working with a WYSIWYG editor (Tinymce) that allows users to post YouTube videos. In order to make the video content responsive, I need to add the class "video-container" around any "iframe" tags inserted when users paste a YouTube link ...

javascriptjqueryiframetinymcevue.js

AngularJS allows a function to return an array value, which can be displayed in separate blocks on

Building a program that involves working with an AngularJS array. I need to showcase the elements of the AngularJS array, returned by a function, in an organized manner. Each element should be displayed correspondingly - for example, 'first' cont ...

javascripthtmlcssangularjs

Ways to center text within a nested div in a parent div with table-cell styling

The issue I am facing involves a parent div with the CSS property display: table;. Nested inside is a child div with display: table-cell;. Despite applying text-align: center;, the text within the second div does not align to the center as expected. Here ...

htmlcssangularjs

Creating a Loop with v-for in Laravel Framework that works similarly to the Forelse in Laravel

Trying to achieve a similar functionality to forelse in Laravel framework blade using Vue. This is just a test to check if a table has records or not, and if not, display a default value: <tr> <td colspan="4">There's No Records Yet< ...

vue.js

Troubles arise when trying to encapsulate a ReactJS embedded application with Material ui, causing issues with the

Currently, I am integrating a ReactJS application using Material UI styled components within a Wordpress page. To achieve this, I am utilizing webpack for transpilation of the JavaScript. After generating the bundle for the embedded version of the applica ...

cssreactjswordpressmaterial-uiembed

The PNG logo will display with white borders when viewed on Internet Explorer 9

My current project involves developing an asp.net mvc web application. In the upper top navigation bar, we have a blue area where I am trying to display our logo using the code snippet below: <a class="brand" href="~/Home/Index/"> <img alt="Group ...

htmlcsslayout

Download files from Firebase storage to a user's device

I have a variety of files such as images, videos, and audio stored in my firebase storage. My goal is to provide users with the ability to download these files to their computers by clicking on a download button. After reviewing the firebase documentation ...

javascriptfirebasevue.jsfirebase-storage

Is it possible to combine Django urls and Vue routes in a single project?

After setting up my Django app and implementing the authentication layer using Django-Allauth with features like email confirmation, password reset, and two-factor authentication, I've come to the realization that for my app's interactive nature ...

javascriptpythondjangovue.jsfrontend

What is the best way to modify the styling of my CSS attributes?

I'm currently working with this CSS code: input:checked + .selectablelabel .check { visibility: hidden; } Now, I want to change the visibility property to "visible" using JavaScript. I attempted the following: $(document).on('click', & ...

javascripthtmlcss

What can I do to ensure that the selectInput choices in Shiny are easily accessible and visible to the user?

When running the code provided below, I encountered an issue where the options in the selectInput() were partially blocked by the bottom edge of the wellPanel(). This problem is illustrated in the image below. Users had to adjust the mouse wheel to see all ...

htmlcssrshinyselectinput

Different ways to separate an axios call into a distinct method with vuex and typescript

I have been working on organizing my code in Vuex actions to improve readability and efficiency. Specifically, I want to extract the axios call into its own method, but I haven't been successful so far. Below is a snippet of my code: async updateProf ...

typescriptvue.jsasync-awaitaxiosvuex

Hover over an element repeatedly to trigger an action with jQuery, as opposed to just once

Is it possible to have my p tag transition whenever I hover over it? I am looking to create a hover effect on an image that displays text in a div tag with scaling transitions. Can someone assist me with this? Instead of using jQuery or JavaScript to dyn ...

jqueryhtmlcsstwitter-bootstrap

How can I access the rendered HTML element from a component in Vue 3?

This particular component is known as LayerComponent (placeholder). <script> export default { data() { return { count: 0 } } } </script> <template> <button @click="count++">You have clicked me {{ count ...

javascriptvue.jsvuejs3

What is the best way to inject child nodes into parent nodes without causing the view to shift to the location where the element is being

While I am rendering elements and appending them to a parent div, my screen keeps jumping to the bottom-most element as it loads instead of maintaining the current view. Ideally, it should start at the top of the screen and remain there without any sudden ...

javascriptjqueryhtmlcss

Problem with Chrome Compatibility for Bootstrap Carousel

My webpage features a carousel implemented as a slider. It seems to be working fine in Firefox and mobile browsers, except for Chrome where it doesn't show up at all. I can't seem to figure out what's causing the issue. Here is the syntax I& ...

javascriptjqueryhtmlcsstwitter-bootstrap

What are some tips for keeping design proportions consistent on mobile apps?

Hey there, I have a question that may seem basic to some, but as a newbie in coding, I appreciate your patience. I've been working on an Ionic app and I'm struggling with maintaining CSS proportions of HTML elements. For instance, here's th ...

htmlcssionic-frameworkmobileresponsive-design