We Keep Coding

How can I access a css to animate in javascript Vue JS

I am having a little trouble in using javascript to access a css animation. My goal in this code is if you click the next button or previous button the border should spin but I am having trouble to trigger the css animation.
This is my html
<template>
<div v-on:click="prev" class="prevButton"><p><</p></div>
<div class="borderTop"></div>
<div v-on:click="next" class="nextButton"><p>></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;
}

You can't trigger the animation from Javascript. Instead you should add your animation style to an additional class which you can add to the div for the duration of the animation.
.animate {
animation: spin 2s linear;
}
Add anther class with animation-direction: reverse; if you would like to reverse the animation for the prev button.
prev() {
document.querySelector('.borderTop').classList.add('animate');
// Remove the animate class after the spin was performed so it works 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)
});
}

let borderAnimatable = document.querySelector(".borderTop")
prev(){
borderAnimatable.style.animation = "spin 2s linear";
borderAnimatable.style.WebkitAnimation = "spin 2s linear";
}
next(){
borderAnimatable.style.animation = "spin 2s linear";
borderAnimatable.style.WebkitAnimation = "spin 2s linear";
}

How to restart this css animation when Browser Tab is active

i want to restart this css animation when Browser Tab is active, so How to restart this css animation.
my purpose is that when-when we comes in this animation tab the .r1 DIV box everytime animate.
Just like this example: here the bobble restart when we are in active tab position.
Check this: https://codepen.io/repzeroworld/pen/EmjLGP
https://codepen.io/Bes7weB/pen/vmOMpx
here is no relation from this example to my problem, But i am just telling you for example only.
My code is:
.r1 {
background-color: lightgrey;
width: 300px;
height: 50px;
border: 6px solid green;
padding: 10px;
text-align: center;
}
.r1 {
animation: bounceInRight 1400ms both
}
#keyframes bounceInRight {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0);
}
75% {
transform: translate3d(10px, 0, 0);
}
90% {
transform: translate3d(-5px, 0, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
<div class="r1">This text is the content of the box..</div>
Thanks in advance.

You could use Javascript. Particularly
document.addEventListener("visibilitychange", () => {
if(document.visibilityState === "visible" ){
//restart animation
}
else{
//don't restart
}
})
more on visibility change here https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event

CSS animation to occur on a timer to create a heartbeat animation

The snippet below shows a spinning circle. Every 1 second I want this circle to double in size and then shrink back to it's original size(to look like a heartbeat). The way I am attempting to do this is by creating a timer in javascript so that every one second, the class which causes the grow effect is removed from the circle, and then immediately added back on. I was hoping that having the class added back on after being removed would trigger the animation but I guess not. Right now the "heartbeat" only happens once.
Also I would like to have the circle spinning at constant speed if that's possible. Right now the circle really slows down at the end, and starts a little bit slow.
// set timeout
let tid = setTimeout(mycode, 1000);
function mycode() {
// do some stuff...
let ic = document.getElementById('inner-circle')
ic.classList.remove('heartbeat')
ic.classList.add('heartbeat')
tid = setTimeout(mycode, 1000); // repeat myself
}
function abortTimer() { // to be called when you want to stop the timer
clearTimeout(tid);
}
#spinning-circle {
animation-name: spinning-circle;
animation-duration: 10s;
animation-iteration-count: infinite;
width: 40px;
height: 40px;
}
.heartbeat {
width: 100%;
height: 100%;
animation-name: heartbeat;
animation-duration: 0.15s;
animation-iteration-count: 2;
animation-direction: alternate;
animation-fill-mode: both;
}
#inner-circle img {
width: 100%;
height: auto;
}
#-webkit-keyframes heartbeat {
100% {
transform: scale(2,2);
-webkit-transform: scale(2,2);
}
}
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div id="spinning-circle">
<div id='inner-circle'>
<img src="http://i.stack.imgur.com/WbNlQ.jpg">
</div>
</div>

use setInterval() and clearInterval() instead of setTimeout(), and remove the setTimeout() inside the function mycode()
// set timeout
let tid = setInterval(mycode, 1000);
function mycode() {
// do some stuff...
let ic = document.getElementById('inner-circle')
ic.classList.remove('heartbeat')
ic.classList.add('heartbeat')
}
function abortTimer() { // to be called when you want to stop the timer
clearInterval(tid);
}
and for the animation speed add animation-timing-function: linear; to .heartbeat {} and #spinning-circle {}

You don't need javascript at all:
#spinning-circle {
margin-top: 40px;
margin-left: 40px;
animation: spinning-circle linear 10s infinite;
width: 40px;
height: 40px;
overflow: visible;
}
#inner-circle {
animation: heartbeat 1s infinite;
}
#inner-circle img {
width: 100%;
height: auto;
}
#keyframes heartbeat {
0% {
transform: scale(1);
}
25% {
transform: scale(2);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
#keyframes spinning-circle {
0% {
transform: rotate(0turn);
}
100% {
transform: rotate(-1turn);
}
}
<div id="spinning-circle">
<div id='inner-circle'>
<img src="http://i.stack.imgur.com/WbNlQ.jpg">
</div>
</div>

manipulate CSS animations with javascript

This is a simple question, but I'm pretty new to programming and I'm not exactly sure how to do this.
I have a div that moves on a button press
var checkbox = document.getElementById('checkbox');
var box = document.getElementById('box');
box.addEventListener('click', function() {
checkbox.checked = true;
});
#box {
position: absolute;
transform: translate3d(0, 0, 0);
height: 20%;
width: 20%;
background-color: red;
}
#keyframes moveRight {
0% {
transform: translate3d(0, 0, 0);
}
60% {
transform: translate3d(120%, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}
#checkbox:checked ~ #box {
animation-name: moveRight;
animation-duration: 1s;
animation-fill-mode: forwards;
}
<!DOCTYPE html>
<html>
<body>
<input type="checkbox" id="checkbox" />
<div id="box">
</div>
</body>
</html>
This is a simple animation, so doing it this way isn't really an issue for this case. The issue is when I want to add another animation to it via a checkbox, it sees that both checkboxes are "checked" and it runs both animations. With javascript and without a checkbox, how can I do the following:
-add a css animation
-remove it when I want to use another animation
Thanks!

This can be done, for example, by adding/removing a css class of box element.
(If I understood your question correctly)
var button1 = document.getElementById('button1');
var button2 = document.getElementById('button2');
var box1 = document.getElementById('box1');
button1.addEventListener('click', function() {
box1.className = "";
box1.className += " moving-box-right";
});
button2.addEventListener('click', function() {
box1.className = "";
box1.className += " moving-box-left";
});
#box1 {
position: absolute;
transform: translate3d(0, 0, 0);
height: 20%;
width: 20%;
background-color: red;
}
#keyframes moveRight {
0% {
transform: translate3d(0, 0, 0);
}
60% {
transform: translate3d(120%, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}
#keyframes moveLeft {
0% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0%, 0, 0);
}
}
.moving-box-right {
animation-name: moveRight;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.moving-box-left {
animation-name: moveLeft;
animation-duration: 1s;
animation-fill-mode: forwards;
}
<!DOCTYPE html>
<html>
<body>
<button id="button1">Move box right</button>
<button id="button2">Move box left</button>
<div id="box1"></div>
</body>
</html>
https://jsfiddle.net/kdnzqx52/2/

Make field appear using CSS and Jquery

I just want to create a field which will appear if the user clicks on a button. I know that would also work with just a simple target in CSS, but in my use, I need to do this in the way I tried it. I know it's very much CSS, but I think it shouldn't be too hard to check.
Here is my try:
function brief() {
$('.envelope-wrapper').toggleClass('animate');
}
.envelope-wrapper {
opacity: 0;
width: 735px;
height: 440px;
left: 50%;
margin-left: -367px;
top: 300px;
margin-top: -220px;
border-radius: 10px;
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
overflow: visible;
background: #008da9;
}
.envelope-wrapper.animate {
-webkit-animation-name: visible;
-webkit-animation-duration: 2s;
-webkit-animation-direction: forward;
-webkit-animation-timing-function: ease-out;
}
#-webkit-keyframes visible {
0% {
opacity: 0;
}
10% {
opacity: 10;
}
90% {
opacity: 10;
}
100% {
opacity: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onclick="brief()" class="gogogo">go</div>
<div class="envelope-wrapper"></div>

It might because the envelope-wrapper seems to be forming a overlay on top of the gogogo element which would not fire a click event.
Set position:relative for both the elements.
.gogogo {
position: relative;
}
.envelope-wrapper {
position: relative;
Check Fiddle
Also opacity values varies between 0 and 1
#-webkit-keyframes visible {
0% {
opacity: 0;
}
10 {
opacity: 0.1;
}
90% {
opacity: 0.9;
}
100% {
opacity: 1;
}
}
Check Update Fiddle

Why not just use jQuery .fadeToggle()
http://api.jquery.com/fadetoggle/