JQuery add class after another one was added and is visible - javascript

I have a button. I want to add to this button class: space and after this class was added and is visible in browser I want to add another class: spinner
I have tried with:
$("button").on("click", function(){
$(this).addClass("space");
$(this).addClass("spinner");
}
CSS:
.spacer{
transition: .3s !important;
padding-right: 3.1rem !important;
}
.spinner{
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #3498db;
width: 10px;
height: 10px;
animation: spin 2s linear infinite;
}
But it, obviously, doesn't work. Why?
Can a class be added to an element only after a class was added and has made its effect?


you could add the second class with a short timeout.this gives you also the possibility to add some animations if needed.
window.setTimeout(function() {
button.addClass("spinner");
},500);
promises will work to


You can add event listener to check if the transition is completed.
Consider the code below:
var el = document.getElementById('someelement');
debugger;
function transitionCallback(){
var t;
var transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
}
for(t in transitions){
if( el.style[t] !== undefined ){
return transitions[t];
}
}
}
/* Listen for transition */
var transitionEvent = transitionCallback();
transitionEvent && el.addEventListener(transitionEvent, function() {
console.log('Transition complete.');
});
/*transition example is from w3schools*/
#someelement {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
-webkit-transition: width 2s; /* Safari 3.1 to 6.0 */
}
#someelement:hover {
width: 300px;
}
<html>
<head>
</head>
<body>
<div id="someelement"></div>
</body>
</html>


Use animation-delay to set a delay before it starts to run. I set it to a big number just so you can see the delay.
document.querySelector('button')
.addEventListener('click', event => {
event.preventDefault()
const classList = event.target.classList
classList.toggle('spacer')
classList.toggle('spinner')
})
.spacer{
transition: .3s !important;
padding-right: 3.1rem !important;
}
.spinner{
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #3498db;
width: 10px;
height: 10px;
animation: spin 2s linear infinite;
animation-delay: 2s;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<button></button>

Related

Transition on load works in jQuery; fails in JavaScript

The following setup (see below) animates the div on page load using jQuery, but fails in vanilla JavaScript, in that it gives me the animated state without the animation. I don't wand to use keyframes or a delay, and nothing I tried in JS worked.
Here's the working version, with jQuery:
jQuery(function($) {
$(document).ready(function() {
$("#new-selector").addClass("animated-selector");
});
});
#new-selector {
background: #3a88fe;
width: 50px;
height: 50px;
transition: transform 500ms ease;
}
#new-selector.animated-selector {
background: orange;
transform: translate(75px, 20px) scale(1.5);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="new-selector"></div>
Here's the problematic version, with vanilla JS:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('new-selector').classList.add('animated-selector');
});
#new-selector {
background: #3a88fe;
width: 50px;
height: 50px;
transition: transform 500ms ease;
}
#new-selector.animated-selector {
background: orange;
transform: translate(75px, 20px) scale(1.5);
}
<div id="new-selector"></div>

For the vanilla JS version you might need to wait for the browser to give you the next animation frame using requestAnimationFrame:
document.addEventListener('DOMContentLoaded', function() {
requestAnimationFrame(() => document.getElementById('new-selector').classList.add('animated-selector'))
});
#new-selector {
background: #3a88fe;
width: 50px;
height: 50px;
transition: transform 500ms ease;
}
#new-selector.animated-selector {
background: orange;
transform: translate(75px, 20px) scale(1.5);
}
<div id="new-selector"></div>

Trigger CSS Animations in JavaScript

I don't know how to use JQuery, so I need a method which could trigger an animation using JavaScript only.
I need to call/trigger CSS Animation when the user scrolls the page.
function start() {
document.getElementById('logo').style.animation = "anim 2s 2s forward";
document.getElementById('earthlogo').style.animation = "anim2 2s 2s forward";
}
* {
margin: 0px;
}
#logo {
position: fixed;
top: 200px;
height: 200px;
width: 1000px;
left: 5%;
z-index: 4;
opacity: 0.8;
}
#earthlogo {
position: fixed;
top: 200px;
height: 120px;
align-self: center;
left: 5%;
margin-left: 870px;
margin-top: 60px;
z-index: 4;
opacity: 0.9;
}
#keyframes anim {
50% {
filter: blur(10px);
transform: rotate(-15deg);
box-shadow: 0px 0px 10px 3px;
}
100% {
height: 100px;
width: 500px;
left: 10px;
top: 10px;
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.7);
background-color: rgba(0, 0, 1, 0.3);
opacity: 0.7;
}
}
#keyframes anim2 {
50% {
filter: blur(40px);
transform: rotate(-15deg);
}
100% {
height: 60px;
width: 60px;
left: 10px;
top: 10px;
margin-left: 435px;
margin-top: 30px;
opacity: 0.8;
}
}
#backstar {
position: fixed;
width: 100%;
z-index: 1;
}
#earth {
position: absolute;
width: 100%;
z-index: 2;
top: 300px;
}
<img src="logo.png" id="logo" onclick="start();">
<img src="earthlogo.gif" id="earthlogo" onscroll="start();">
<img src="earth.png" id="earth">
<img src="stars.jpg" id="backstar">

The simplest method to trigger CSS animations is by adding or removing a class - how to do this with pure Javascript you can read here:
How do I add a class to a given element?
If you DO use jQuery (which should really be easy to learn in basic usage) you do it simply with addClass / removeClass.
All you have to do then is set a transition to a given element like this:
.el {
width:10px;
transition: all 2s;
}
And then change its state if the element has a class:
.el.addedclass {
width:20px;
}
Note: This example was with transition. But for animations its the same: Just add the animation on the element which has a class on it.
There is a similar question here: Trigger a CSS keyframe animation via scroll

This is how you can use vanilla JavaScript to change/trigger an animation associated with an HTML element.
First, you define your animations in CSS.
#keyframes spin1 { 100% { transform:rotate(360deg); } }
#keyframes spin2 { 100% { transform:rotate(-360deg); } }
#keyframes idle { 100% {} }
Then you use javascript to switch between animations.
document.getElementById('yourElement').style.animation="spin2 4s linear infinite";
Note: 'yourElement' is the target HTML element that you wish to
animate.
For example: <div id="yourElement"> ... </div>

Adding and removing the animation class does not work in a function. The delay is simply too little. As suggested by this article you can request the browser to reflow and then add the class. The delay isn't an issue in that case. Hence, you can use this code:
element.classList.remove("animation")
element.offsetWidth
element.classList.add("animation")
The best thing is, this works everywhere. All credit goes to the article.

A more idiomatic solution is to use the Web Animations API.
Here is the example from MDN:
document.getElementById("alice").animate(
[
{ transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
{ color: '#431236', offset: 0.3 },
{ transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
], {
duration: 3000,
iterations: Infinity
}
);
OP's example:
document.getElementById('logo').animate(
[
{},
{
filter: 'blur(10px)',
transform: 'rotate(-15deg)',
box-shadow: '0px 0px 10px 3px',
},
{
height: '100px',
width: '500px',
left: '10px',
top: '10px',
box-shadow: '0px 0px 15px 5px rgba(0, 0, 0, 0.7)',
background-color: 'rgba(0, 0, 1, 0.3)',
opacity: '0.7',
},
],
{
duration: 2000,
delay: 2000,
fill: 'forwards',
},
)
At the time of writing, it's supported in all major browsers except IE.
Supported browsers

I have a similar problem.
The best answer didn’t work for me, but when I added the delay it worked.
The following is my solution.
CSS
.circle_ani1,
.circle_ani2 {
animation-duration: 1s;
animation-iteration-count: 1;
}
.circle_ani1 {
animation-name: circle1;
}
.circle_ani2 {
animation-name: circle2;
}
JS
let temp_circle1 = $('.TimeCountdown_circle1').removeClass('circle_ani1');
let temp_circle2 = $('.TimeCountdown_circle2').removeClass('circle_ani2');
window.setTimeout(function() {
temp_circle1.addClass('circle_ani1');
temp_circle2.addClass('circle_ani2');
}, 50);

Vanilla JS version
document.getElementById('logo').classList.add("anim");
document.getElementById('earthlogo').classList.add("anim2");

You could use CSS to hide the image / animation and show when the user scrolls. This would work like this:
CSS:
div {
border: 1px solid black;
width: 200px;
height: 100px;
overflow: scroll;
}
#demo{
display: none;
}
HTML:
<div id="myDIV"> </div>
<div id="demo">
<img src="earthlogo.gif" id="earthlogo" alt="Thanks for scrolling. Now you see me">
</div>
Your javascript just needs to include an eventListener to call the function which triggers the display of your animation.
JS:
document.getElementById("myDIV").addEventListener("scroll", start);
function start() {
document.getElementById('demo').style.display='block';
}

You could use animation-play-state (Mdn docs) like this
element.style.animationPlayState = "paused/running"
Code snippet:
function play() {
document.getElementById("div").style.animationPlayState = "running";
}
function pause() {
document.getElementById("div").style.animationPlayState = "paused";
}
.animation {
width: 50px;
height: 50px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 2s;
animation-play-state: paused;
animation-iteration-count: infinite;
}
#keyframes example {
0% {
background-color: red;
left: 0px;
top: 0px;
}
25% {
background-color: yellow;
left: 50px;
top: 0px;
}
50% {
background-color: blue;
left: 50px;
top: 50px;
}
75% {
background-color: green;
left: 0px;
top: 50px;
}
100% {
background-color: red;
left: 0px;
top: 0px;
}
}
<button onclick="play()">Play</button>
<button onclick="pause()">Pause</button><br><br>
<div id="div" class="animation"></div>

Here's the main code:
HTML:
<img id="myImg">
CSS:
#myImg {
//properties
animation: animate 2s linear infinite //infinite is important!
}
#keyframes animate {
//animation base
}
JS:
document.getElementById("myImg").style.webkitAnimationPlayState = "paused";
window.addEventListener("scroll", function() {
document.getElementById("myImg").style.webkitAnimationPlayState = "running";
setTimeout(function() {
document.getElementById("myImg").style.webkitAnimationPlayState = "paused";
}, 2000);
});

If you want Animations i recommend you create a CSS class which you toggle on a Condition whit JS:
CSS
.animation {
animation: anim 2s ease infinite;
transition: .2s
}
JS
// Select your Element
$element.document.querySelector(".yourElement");
$element.addEventListner('click', () => {
$element.classList.toggle("animation")
})

Inherit css value from body (parent) not working

I'm want to disable all css transitions using JavaScript. I added transition: none to the body (via JavaScript), but the elements in the body still have a transition.
Of course I can loop through all elements, and add transition = 'none';, but I'm sure there's a better way of temporary disabling the css transition of all elements. Here's a sample code:
JSFiddle
var sample = document.getElementById('sample');
sample.addEventListener('click', function() {
if (document.body.style.transition === 'none') {
document.body.style.transition = '';
} else {
document.body.style.transition = 'none';
}
})
#sample {
width: 200px;
height: 100px;
background: lawngreen;
transition: transform 500ms ease;
}
#sample:hover {
transform: translateX(50px);
}
<div id="sample">Hover over me to move
<br />Click to disable transition</div>

Add a new class name to the body or parent tag. Set transitions with the new parent selector .animated #sample:
<body class="animated">
<div id="sample"></div>
</body>
... and the styles:
#sample {
width: 200px;
height: 100px;
background: lawngreen;
}
.animated #sample {
transition: transform 500ms ease;
}
.animated #sample:hover {
transform: translateX(50px);
}
To disable animations of all children just remove the .animated class from the body or parent tag.
Modified fiddle: https://jsfiddle.net/xjxauu0h/1/

you'll want to use a class on body so you can turn it on and off.
var sample = document.getElementById('sample');
document.body.classList.add('transitioner');
sample.addEventListener('click', function() {
if (document.body.classList && document.body.classList.length) {
document.body.classList.remove('transitioner');
} else {
document.body.classList.add('transitioner');
}
console.log(document.body.classList);
})
#sample {
width: 200px;
height: 100px;
background: lawngreen;
}
.transitioner *{
transition: transform 500ms ease;
}
#sample:hover {
transform: translateX(50px);
}
<div id="sample">Hover over me to move
<br />Click to disable transition</div>

var sample = $('#sample');
var body = $('body');
sample.click(function() {
body.toggleClass('notransition notransform');
});
#sample {
width: 200px;
height: 100px;
background: lawngreen;
transition: transform 500ms ease;
}
#sample:hover {
transform: translateX(50px);
}
.notransition.notransform #sample {
background: HotPink;
}
.notransition * {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
.notransform * {
-webkit-transform: none !important;
-moz-transform: none !important;
-o-transform: none !important;
-ms-transform: none !important;
transform: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sample">Hover over me to move
<br />Click to disable transition</div>

Reliable way to trigger one-way CSS transition?

I have designed a transition that changes instantly background color, then slowly recovers to original color:
body, html {margin: 0px;padding: 0px;}
div {
padding: 3px;
margin: 1px 0 1px 0;
border: 1px solid black;
background-color: #3377FF;
transition: background-color .9s ease-in;
}
div:hover {
background-color: #33FF11;
transition-duration: 0s;
}
<div> Hello</div>
<div> Hello</div>
This is designed for row in a table to notify user of a change. I'd like to trigger effect this programmatically, but by using the actual CSS.
Row.prototype.blink = function() {
... ?
}
I tried to use setTimeout to add and remove class name from the nodes:
$("div").on("click", function() {
$(this).addClass("updated");
var _this = this;
setTimeout(function(){$(_this).removeClass("updated");}, 30);
});
body, html {margin: 0px;padding: 0px;}
div {
padding: 3px;
margin: 1px 0 1px 0;
border: 1px solid black;
background-color: #3377FF;
transition: background-color .9s ease-in;
}
div.updated {
background-color: #33FF11;
transition-duration: 0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click div to activate the blink effect:</p>
<div> Hello</div>
<div> Hello</div>
I also tried to use the transitioned event, but the event doesn't ever trigger:
$("div").on("click", function() {
$(this).one("transitionend", function(){$(this).removeClass("updated");}); // never happens
$(this).addClass("updated");
});
I don't like the setTimeout method, can't you think of better trick to trigger the blink effect?

The reason the transitionend event isn't being triggered is because transition-duration is set to 0s. In other words, the transition never begins until the class is removed (but the class isn't removed because the event isn't fired).
It really sounds like an animation would be better suited for this. Just listen to the animationend event and remove the class in the callback when the animation ends:
$('div').on('click', function() {
$(this).addClass('updated').one('animationend', function() {
$(this).removeClass('updated');
});
});
body, html {margin: 0px;padding: 0px;}
div {
padding: 3px;
margin: 1px 0 1px 0;
border: 1px solid black;
background-color: #3377FF;
cursor: pointer;
}
div.updated {
animation: updatedFade .9s ease-in forwards;
}
#keyframes updatedFade {
0% { background-color: #33FF11; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Hello</div>
<div>Hello</div>
As a work-around to your initial solution, you could change the transition-duration to something extremely short, like 1ms, so that the initial transition is actually started, thereby allowing the transitionend event to be fired:
$("div").on("click", function() {
$(this).addClass("updated").one("transitionend", function() {
$(this).removeClass("updated");
});
});
body, html {margin: 0px;padding: 0px;}
div {
padding: 3px;
margin: 1px 0 1px 0;
border: 1px solid black;
background-color: #3377FF;
transition: background-color .9s ease-in;
cursor: pointer;
}
div.updated {
background-color: #33FF11;
transition-duration: 1ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Hello</div>
<div>Hello</div>

JavaScript induced CSS animation not working

Following advice from this CSS Tricks article, I tried to write some code to induce a CSS transition using JavaScript.
(Here's my jsFiddle.)
HTML:
<button id="button" onclick="doMove2()" value="play">Play</button>
<div class="foo"></div>
CSS:
#button {
position: absolute;
width: 200px;
height: 50px;
top: 185px;
left: 0px;
}
.foo {
position: absolute;
width: 50px;
height: 50px;
border: 1px dashed black;
left: 0px;
top: 120px;
}
.foo.horizTranslate {
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
margin-left: 50% !important;
}
JavaScript:
var foo = document.getElementsByClassName('foo')[0];
function doMove2(){
document.getElementById("button").onclick = function(){
if(this.innerHTML === 'Play'){
this.innerHTML = 'Pause';
foo.classList.add('horizTranslate');
} else {
this.innerHTML = 'Play';
var computedStyle = window.getComputedStyle(foo2),
marginLeft = computedStyle.getPropertyValue('margin-left');
foo.style.marginLeft = marginLeft;
foo.classList.remove('horizTranslate');
}
}
}
Why doesn't this work?
Could someone explain the difference between a transition and an animation?

Firstly, I don't recommend using jsfiddle, sometimes its glitchy and unreliable. I use jsbin, check my demo: http://jsbin.com/guceneku/1/
I removed the onclick in your HTML tag, since you already had a trigger in js, so it becomes:
<button id="button" value="play">Play</button>
<div class="foo"></div>
Next your js becomes:
var foo = document.getElementsByClassName('foo')[0];
document.getElementById("button").onclick = function(){
if(this.innerHTML === 'Play'){
this.innerHTML = 'Pause';
foo.classList.add('horizTranslate');
} else{
this.innerHTML = 'Play';
var computedStyle = window.getComputedStyle(foo2),
marginLeft = computedStyle.getPropertyValue('margin-left');
foo.style.marginLeft = marginLeft;
foo.classList.remove('horizTranslate');
}
}

You have no initial value defined. It's defaulting to a margin of auto, and auto is not transitionable.
Also, you should define the transitions on the "base" state, otherwise it won't transition when removing the class.
So:
.foo {
position:absolute;
width:50px;
height:50px;
border:1px dashed black;
left:0px;
top:120px;
margin-left: 0; /* ADD THIS */
transition: 3s; /* all browsers support unprefixed now */
}
.foo.horizTranslate {
margin-left: 50%;
}

Categories