Develop Reference

JS Class remove not working properly, Dev Tools problem

my purpose is that to animate the DIV Box everytime when browser Tab is active (means i switch the tab to other & back to this tab), As i am adding addEventListener & its working but one time only, not everytime.
But when i open Developer tools in chrome it's work everytime.
Check this video to better understand my problem: https://youtu.be/9Uvm__ln6zE
JS Class remove not working properly, Dev Tools problem
document.addEventListener("visibilitychange", () => {
if(document.visibilityState === "visible" ){
var element = document.getElementById("topHeading");
element.classList.add("r1");
}
else{
var element = document.getElementById("topHeading");
element.classList.remove("r1");
}
});
.r1 {
background-color: lightgrey;
width: 300px;
height: 50px;
border: 6px solid green;
padding: 10px;
text-align: center;
visibility: visible;
}
.r2 {
background-color: red;
}
.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 id="topHeading">
This text is the content of the box..
</div>
Thanks in advance

This is a speed problem. When you add the class, the browser immediatly assumes no transition is needed, because the element already has the class. You can fix this by delaying your classList.add a little:
var element = document.getElementById("topHeading");
document.addEventListener("visibilitychange", () => {
var isVisible = document.visibilityState === "visible";
setTimeout(function() {
element.classList[isVisible ? 'add' : 'remove']("r1");
});
});
Fixed Codepen

Re-applying the class doesn't work. You can get it to work by removing the element from the dom and then adding it again or by introducing a delay. You can read more about restarting css animations at https://css-tricks.com/restart-css-animation/
document.addEventListener("visibilitychange", () => {
var element = document.getElementById("topHeading");
if(document.visibilityState === "visible" ) {
element.classList.add("r1");
} else {
element.parentNode.replaceChild(element.cloneNode(true), element);
}
});
Or you can add the animation class to the html element and write less JS:
document.addEventListener("visibilitychange", () => {
var element = document.getElementById("topHeading");
if(document.visibilityState === "visible" ) {
element.parentNode.replaceChild(element.cloneNode(true), element);
}
});

How to animate or use transitions on a message pop up with javascript and css?

I currently have the message displaying and disappearing as I want but the transition isn't working, This is what I tried.
const alertMsg = document.querySelector('.alert');
contactForm.addEventListener('submit', formSubmitted);
function formSubmitted(e) {
//other stuff
alertMsg.style.display = 'block';
setTimeout(() => {
alertMsg.style.display = 'none';
}, 5000);
}
.alert {
transition: all 0.5s ease-out;
}
<div class="alert">Your message has been sent, I will get back to you as soon as possible.</div>
The message just instantly disappears and reappears, how can I use the transition currently to make some sort of animation?
This is my first question so sorry if I missed any information out, I will add any more if needed. Thanks

You can't transition (or animate) the display property. the display property is either on or off there's nothing to transition or animate.
What you can do is animate opacity and alter the display property at start and end.
something like:
#keyframes showBlock {
from { display: block; opacity: 0; }
to { opacity: 1; }
}
#keyframes hideBlock {
from { opacity: 1; }
to { opacity: 0; display: none; }
}

CSS or JS transition for button that changes size from text changes?

I have an Angular app with a button that has a label of "+"
On mouse-over I call element.append(' Add a New Number'); This adds that text new to the + in the label.
Use clicks the button, new number is added, label of button is returned to "+"
I would like to animate the button size change and/or the txt label change. So far, just adding a css transition to width does nothing.
Thoughts?
UPDATE:
To help clarify, this is a bootstrap input group button. I don't want to set widths or css transforms, to avoid breaking the group either here or at other screen sizes.
here are the 2 states:
I was simply letting the existing button stretch due to the injection of more words.

I am probably guessing you don't have a predefined width. anyways you could use transform-origin and scale to achieve such an effect
FIDDLE HERE
HTML:
<button id="btn">Click</button>
CSS:
#btn {
outline: none;
border:none;
background: orange;
padding: 1em 1.5em;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
}
#btn:hover {
-webkit-transform: scaleX(1.2);
-ms-transform: scaleX(1.2);
-o-transform: scaleX(1.2);
transform: scaleX(1.2);
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-ms-transform-origin:0 0;
-o-transform-origin:0 0;
transform-origin:0 0;
}
you should use CSS transforms for animations rather than a property like width. The animation is slightly jerky , so you might want to work on it a bit more.

You had jQuery tagged, so this is how I would do it.
All the transitions. fade + animate
function changeButtonText(button, text){
// jQuery it
$button = $(button);
// get orinal css'es
oooon = $button.css('text-align');
doooo = $button.css('overflow');
treee = $button.css('white-space');
$button.css('text-align', 'left').css('overflow', 'hidden').css('white-space', 'nowrap');;
// get new width first
$tmpBtn = $button.clone().append(text).css('opacity', '0.0').appendTo('body');
newWidth = $tmpBtn.outerWidth();
$tmpBtn.remove();
// now stretch the button out
$button.animate({width: newWidth+"px"});
// fade texts into the butt
$button.append('<span style="display:none">'+text+'</span>');
$btnText = $button.find('span').fadeIn('slow');
return {
'text-align':oooon,
'overflow':doooo,
'white-space':treee
};
}
Fiddle

I think that with bootstrap CSS and Angular - it will be more complex, but this is how I would go about it programatically. You'll have to deal with the model and the data differently - and you should probably build a directive to repeat the action and integrate with Angular smoothly:
HTML
<div class="thing">+ <span id="message">
<span id='target'></span>
</span></div>
JavaScript
$('.thing').hover( function() {
var originalWidth = $(this).outerWidth();
$messageHolder = $(this).find('#message');
$target = $(this).find('#target');
$target.text('Some helpful text');
var targetWidth = $target.outerWidth();
$messageHolder.animate({
width: targetWidth
}, {
duration: 200,
complete: function() {
$messageHolder.animate({
opacity: 1
}, 500);
}
});
});
$('.thing').on('click', function() {
$target = $(this).find('#target');
$target.empty();
$messageHolder = $(this).find('#message');
$messageHolder.animate({
opacity: 0
}, {
duration: 200,
complete: function() {
$messageHolder.animate({
width: 0
}, 200);
}
});
});
I'm sure that Angular's ng-animate library watches the dom and also has an excellent way of animating things as they change in the model/controller or whatever they are calling it. This is probably something what it looks like behind the scenes.
Good luck!
jsFiddle

How to use css method of rotation in jquery

When my webpage is first loaded, my starting div rotates using this CSS code:
#keyframes rotate
{
from { transform:rotate(0deg);
-ms-transform:rotate(0deg);
-webkit-transform:rotate(0deg); }
to { transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg); }
}
#-webkit-keyframes rotate
{
from { transform:rotate(0deg);
-ms-transform:rotate(0deg);
-webkit-transform:rotate(0deg); }
to { transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg); }
}
After the rotation, this code is useless.
I would like it so when a button is clicked, it will make this rotation again.
To do this I need to be able to put this css code into a javascript/jQuery function so I can call it at any time.
Is this possible?

TRY THIS
$({deg: 0}).animate({deg: d}, {
duration: 2000,
step: function(now){
elem.css({
transform: "rotate(" + now + "deg)"
});
}
});
Look at JSFIDDLE DEMO

You can wrap your animation behavior into a class like:
.rotate{
-webkit-animation: rotate 4s;
/* more prefixes if you want to */
animation: rotate 4s;
}
Then you can apply that class on click of your button like:
$('#myButton').click(function(){
$('#myElementToAnimate').addClass('rotate');
});
To remove the class once your animation has finished you have to listen for the animationend event like:
$('#myButton').click(function(){
// all the different event names are due to the fact that this isn't fully standardized yet
$('#myElementToAnimate').addClass('rotate').on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function(){
$(this).removeClass('rotate');
});
});
This should give you smoother results than using JavaScript based animation. See this demo fiddle

by simply applying the CSS properties and the desired values to jQuery
DEMO
$(' #box ').css({
transition: '2s linear',
transform: 'rotate(360deg)'
});
P.S: jQuery will handle all those -browser-specific prefixes for you.

Using jquery, how to I animate adding a new list item to a list?

I have a simple javascript function that allows me to add an item to a list. Note that I use JQuery...
function prependListItem(listName, listItemHTML)
{
//Shift down list items...
$("#" + listName + " li:first").slideDown("slow");
//Add new item to list...
$(listItemHTML).prependTo("#" + listName)
}
The 'listName' is simply an <ul> with some <li>'s.
The prepending works fine, but I can't get the slideDown effect to work. I would like the list items to slide down and the new item to then appear on top. Any ideas how to accomplish this? I'm still new to JQuery...

If you wanted it to be added and slide down at the same time do this:
function prependListItem(listName, listItemHTML){
$(listItemHTML).hide().prependTo('#' + listName).slideDown('slow');
}
To truly do exactly what you described (slide down, then fade in), you would need something like this:
function prependListItem(listName, listItemHTML){
$(listItemHTML)
.hide()
.css('opacity',0.0)
.prependTo('#' + listName)
.slideDown('slow')
.animate({opacity: 1.0})
}

Try:
$("<li>new item</li>").hide().prependTo("#" + listName).slideDown("slow");
In other words:
Create the new list item;
Hide it (so it's not visible when added to the list);
Add it to the top of the list; then
Slide it down. The other items will slide down.

http://jsfiddle.net/eCpEL/13/
this should help
Using keyframe animation
.comefromtop {
animation: comefromtop 0.5s;
}
.pushdown {
animation: pushdown 0.5s;
}
#-webkit-keyframes comefromtop {
0% { opacity:0; -webkit-transform: translateY(-100%); }
100% { opacity:1; -webkit-transform: translateY(0px); }
}
#-webkit-keyframes pushdown {
0% { /*opacity:0;*/ -webkit-transform: translateY(-10%); }
100% { /*opacity:1;*/ -webkit-transform: translateY(0); }
}
And using a basic javascript
function add() {
var val = $('#input').val();
var item = $('<li></li>').addClass('comefromtop').attr('id',val).text(val); $('#Trees').prepend(item).addClass('pushdown');
setTimeout(function () {
$('#Trees').removeClass('pushdown');
}, 600);
}
$('.add').click(add);
$('#input').on('keypress',function (e) {
if (e.keyCode === 13) {
add();
}
});
You can achieve godliness