What is the best way to manipulate a CSS animation using JavaScript within a Vue JS project?

Question

What is the best way to manipulate a CSS animation using JavaScript within a Vue JS project?

I am facing some challenges with implementing a JavaScript function to access a CSS animation. My objective in this code is to make the border spin when the next or previous button is clicked, but I'm struggling to activate the CSS animation.

Here is my HTML:

<template>
<div v-on:click="prev" class="prevButton"><p>&lt;</p></div>
<div class="borderTop"></div>
<div v-on:click="next" class="nextButton"><p>&gt;</p></div> 
</template>

This is the CSS:

.border{
  position: fixed;
  height: 500px;
  width: 500px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 50%;
  border: 120px solid rgba(0, 0, 0, 0.555);
  transform: rotate(45deg);
  -webkit-animation: spin 2s linear; /* Safari */
  animation: spin 2s linear;
}

@keyframes spin {
  
  0% { transform: rotate(0deg); 
        border-right: 120px solid rgba(255, 255, 255, 0.226);}
  100% { transform: rotate(360deg); }
}

This is the JavaScript:

prev(){ 
  document.querySelector(".borderTop").animate;
}
next(){ 
  document.querySelector(".borderTop").animate;
}

javascript css vue.js

Answer 1

Answer №1

To activate the animation using Javascript, you need to incorporate your animation style within a separate class that can be applied to the div during the animation period.

.animate {
    animation: spin 2s linear;
}

If you want to reverse the animation for the previous button, create another class with animation-direction: reverse;.

prev() {
  document.querySelector('.borderTop').classList.add('animate');
  
  // Remove the animate class after the animation is completed to enable it again when the button is clicked.
  setTimeout(function() {
    document.querySelector('.borderTop').classList.remove('animate');
  }, 2000);
}

next() {
  document.querySelector('.borderTop').classList.add('animate');
  setTimeout(function() {
    document.querySelector('.borderTop').classList.remove('animate');
  }, 2000);
}

Answer 2

To activate the animation using Javascript, you need to incorporate your animation style within a separate class that can be applied to the div during the animation period.

.animate {
    animation: spin 2s linear;
}

If you want to reverse the animation for the previous button, create another class with animation-direction: reverse;.

prev() {
  document.querySelector('.borderTop').classList.add('animate');
  
  // Remove the animate class after the animation is completed to enable it again when the button is clicked.
  setTimeout(function() {
    document.querySelector('.borderTop').classList.remove('animate');
  }, 2000);
}

next() {
  document.querySelector('.borderTop').classList.add('animate');
  setTimeout(function() {
    document.querySelector('.borderTop').classList.remove('animate');
  }, 2000);
}

Answer 3

Answer №2

let borderElement = document.querySelector("#topBorder");
changeAnimation(){ 
  borderElement.style.animation = "rotate 2s linear";
  borderElement.style.WebkitAnimation = "rotate 2s linear";
}

Answer 4

let borderElement = document.querySelector("#topBorder");
changeAnimation(){ 
  borderElement.style.animation = "rotate 2s linear";
  borderElement.style.WebkitAnimation = "rotate 2s linear";
}

What is the best way to manipulate a CSS animation using JavaScript within a Vue JS project?

Answer №1

Answer №2

Similar questions

The proper way to close file descriptors on a terminated HTTP connection in a Node.js environment

Nested arrays within an array in AngularJS can be displayed using ng-repeat

Learn the process of eliminating special characters from input or textarea fields with AngularJs!

What is the best way to link my PHP variable to a JavaScript variable within a While loop?

jQuery Validation for Radio Buttons and Optional Fields

Is there a way to make the menu overlap the logo on the website?

Align child elements in the middle horizontally within a col-lg-4 class using Bootstrap

Python Scrapy: Extracting live data from dynamic websites

What is the approach of Angular 2 in managing attributes formatted in camelCase?

Is it possible to tap into the stylus Abstract Syntax Tree (AST) for

AngularJS: comparing the differences between copying and extending

Leverage CSS variables within the `url('data:image/svg+xml')` function

I possess both a minimum and maximum number; how can I effectively create an array containing n random numbers within

Express Module Paths Failing to Function Properly

Issues with Flexbox not being rendered correctly on Safari 5.1 for Windows

Unable to use console log in shorthand arrow function while working with Typescript

Selenium is throwing an ElementNotInteractableError indicating that the element is not able to be

Reactjs failing to fetch data with Axios

Display the matrix in a semi-spiral pattern

What is the best way to attach a function to an href attribute for creating a dynamic link?