Utilize CSS/SCSS to apply dynamic styles in Vue components

Question

Utilize CSS/SCSS to apply dynamic styles in Vue components

Currently, I am utilizing animate.css in my project. One of the components, a v-flex element, is structured as follows:

<v-flex md3 sm6 xs12 v-for="(d, index) in data" :key="organization.id"
             class="animated fadeInLeft" :style="{ 'animation-delay': index/8 + 's' 
       }">
<v-card>
-----
</v-card>
</v-flex>

In this setup, the animated fadeInLeft CSS classes are being applied to all cards by default. To create a delay effect on each card based on its position, I have implemented the use of animation-delay, which works as intended except for Safari browser. For Safari compatibility, I need to include -webkit-animation-delay. Though adding multiple styles in v-style and recalculating the value is an option, it does not produce aesthetically pleasing results. Are there any jQuery functions or SCSS mixins that can dynamically assign style values to elements without compromising on design integrity?

jquery html css vue.js sass

Answer 1

Answer №1

If you assign a unique identifier to each Card, you can achieve this using the following SCSS function:

$totalCards: 6;
@for $i from 1 through $totalCards {
    #card-#{$i} {
        animation-delay: #{$i * 0.5}s;
        -webkit-animation-delay: #{$i * 0.5}s;
    }
}

SCSS output:

#card-1 {
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}

#card-2 {
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
}

#card-3 {
  animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
}

#card-4 {
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
}

#card-5 {
  animation-delay: 2.5s;
  -webkit-animation-delay: 2.5s;
}

#card-6 {
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
}

Answer 2

If you assign a unique identifier to each Card, you can achieve this using the following SCSS function:

$totalCards: 6;
@for $i from 1 through $totalCards {
    #card-#{$i} {
        animation-delay: #{$i * 0.5}s;
        -webkit-animation-delay: #{$i * 0.5}s;
    }
}

SCSS output:

#card-1 {
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}

#card-2 {
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
}

#card-3 {
  animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
}

#card-4 {
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
}

#card-5 {
  animation-delay: 2.5s;
  -webkit-animation-delay: 2.5s;
}

#card-6 {
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
}

Utilize CSS/SCSS to apply dynamic styles in Vue components

Answer №1

Similar questions

Does CSS in the current IE9 beta allow for text shadows to be implemented?

Aligning UL LI elements vertically for multi-line textORHow to vertically

Four unique classes will each be styled differently using pseudo selectors

Unique background image tailor-made for each radio button

What is the best way to retrieve all the listed TV and film ratings in descending order? Using Django

Make sure to wait for the complete loading of all content in the AJAX response before showing it on

What is the best way to input JSON objects into an autocomplete feature?

Execute JavaScript AJAX Request On Page Load

The use of non-breaking space symbol ( ) does not function properly in Weblogic 14

understanding nested json with backbone

How can one module in Nuxt mutate the Vuex state of another module?

Customize Bootstrap layout on the fly

Demonstrate the utilization of JQuery to unveil a secondary menu

Successfully Determining User Identity with Ajax Authentication

Updating the background image with Jquery is resulting in a distracting flicker effect

The breadth of the container

Wrapping flex items inside a table in IE11: A guide

Easily adjust the width of divs within a parent container using CSS for a seamless and uniform

What is the best way to define relative paths for content like CSS files?

When scrolling down, the popup window shifts its position