We Keep Coding

How do I animate React component upon entering the dom?

I have code something like this in react
{this.state.popoverOpen && <Popover/>}
it's easy, but when the component actually appears I want it to come in with opacity changing and animating...
I've been working with react for some time but these cases always leave room for confusion for me...
So whats the best and easy solution? no applying classes work obviously at this point...

You can use CSS transitions. Try adding the fade-in to the className of Popover's outermost HTML element after adding the code below to the relevant CSS file.
.fade-in {
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Codepen example: https://codepen.io/rodenmonte/pen/LYpOVpb
Here's a StackOverflow answer showing another (better IMO) way to do this ReactJS: Fade in div and fade out div based on state

Moving element on screen and back with keyframes

Provided I have following code:
<div class="leftBox">
<div class="mainNode"></div>
</div>
<script type="text/javascript">
$('.mainNode').click(function() {
var element = $('.mainNode');
if (!element.hasClass('show')) {
element.removeClass('hide');
element.addClass('show');
} else {
element.removeClass('show');
element.addClass('hide');
}
})
</script>
and in CSS:
.mainNode {
width: 160px;
height: 160px;
border-radius: 50%;
background-color: red;
position :relative;
}
.show {
-webkit-animation: mymove 1s forwards; /* Safari 4.0 - 8.0 */
animation: mymove 1s forwards;
}
.hide {
-webkit-animation: mymove 1s reverse; /* Safari 4.0 - 8.0 */
animation: mymove 1s reverse;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
/* Standard syntax */
#keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
What I'm looking for is that my circle moves to the bottom when I click it using the keyframes (I will have more of them in the future).
After the first click the circle should stay at the bottom, this is happening already with the code above.
However, when I reclick the circle, I want it to do the same animation in reverse and return to the original position. Also allowing me to reclick it after to move it back down using the same animation... This is currently not working. It moves down and the jumps to the top and the bottom without the animation.
Any help would be appreciated.
Here be my example

Please try this. I try my best. Animation work top to bottom and bottom to top every time.
$('.mainNode').click(function() {
var element = $('.mainNode');
if (!element.hasClass('show')) {
element.removeClass('hide');
element.addClass('show');
element.before( element.clone(true)).remove();
} else {
element.removeClass('show');
element.addClass('hide');
element.before( element.clone(true)).remove();
}
})
.mainNode {
width: 160px;
height: 160px;
border-radius: 50%;
background-color: red;
position :relative;
}
.show {
-webkit-animation: mymove 1s forwards; /* Safari 4.0 - 8.0 */
animation: mymove 1s forwards;
}
.hide {
-webkit-animation: mymove1 1s forwards; /* Safari 4.0 - 8.0 */
animation: mymove1 1s forwards;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
/* Standard syntax */
#keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes mymove1 {
from {top: 200px;}
to {top: 0px;}
}
/* Standard syntax */
#keyframes mymove1 {
from {top: 200px;}
to {top: 0px;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="leftBox">
<div class="mainNode"></div>
</div>

Use backwords instead of reverse it will work for you.
.hide {
-webkit-animation: mymove 1s backwards; /* Safari 4.0 - 8.0 */
animation: mymove 1s backwards;
animation-delay: .2s;
}

You need to change two things to make this work:
.hide {
-webkit-animation: mymove 1s reverse forwards; /* Safari 4.0 - 8.0 */
animation: mymove 1s reverse forwards;
animation-delay: .2s;
}
Use animation-direction reverse, but animation-fill-mode forwards. This way, the animation will start from the end, and stay at the last keyframe (which is back at the top).
But there is an additional problem: As soon as the show class is removed, it jumps back to top, since the animation no longer applies. To prevent this, you can add animation-name: mymove to your .mainNode.
.mainNode {
animation-name: mymove;
// Other properties...
}
See it in action here: https://codepen.io/anon/pen/jLgrjW

Make Color of an Element Pulse Continuously With Angular

I am trying to make the color of a button pulse from its current color, say, #ed8c55, to pure white and back to the original color with the entire cycle taking about 2-3 seconds. How could I do that?
In particular, I see that there are a couple of problems here. One is to make the timer and attach some variable's increment to the value of the color. The second problem is the actual color itself. How would one go about continuously changing a hex color towards white and back using a loop of some sort?
I have the following timer implemented that counts seconds. I could easily modify it to count milliseconds or something like that.
var mytimeout = null; // the current timeoutID
$scope.counter = 0;
// actual timer method, counts up every second
$scope.onTimeout = function() {
$scope.counter++;
mytimeout = $timeout($scope.onTimeout, 1000);
};
Any help is appreciated.

I know you want an animation via AngularJS but I dont think thats the right tool for the job as its easily achieved via CSS alone. I'd really advise you to do it like so;
EDIT ------------------
After your comments of dynamically adding a background colour that will then pulse the best way is to inline style the colour via angular and css keyframe the animation.
CSS --
#-webkit-keyframes pulse {
25% { background-color: #FFF; }
}
#-moz-keyframes pulse {
25% { background-color: #FFF; }
}
#-o-keyframes pulse {
25% { background-color: #FFF; }
}
#keyframes pulse {
25% { background-color: #FFF; } // changed to 25% to stop the sudden change to white
}
.element {
transition: background-color 3s;
width: 50px;
height: 50px;
-webkit-animation: pulse 3s infinite; /* Safari 4+ */
-moz-animation: pulse 3s infinite; /* Fx 5+ */
-o-animation: pulse 3s infinite; /* Opera 12+ */
animation: pulse 3s infinite; /* IE 10+, Fx 29+ */
}
HTML -
<div style="background-color: #ed8c55;" class="element"></div>
View my codepen here
/ EDIT ------------------
OG Answer ---
#-webkit-keyframes pulse {
0% { background-color: #ed8c55; }
50% { background-color: #FFF; }
100% { background-color: #ed8c55; }
}
#-moz-keyframes pulse {
0% { background-color: #ed8c55; }
50% { background-color: #FFF; }
100% { background-color: #ed8c55; }
}
#-o-keyframes pulse {
0% { background-color: #ed8c55; }
50% { background-color: #FFF; }
100% { background-color: #ed8c55; }
}
#keyframes pulse {
0% { background-color: #ed8c55; }
50% { background-color: #FFF; }
100% { background-color: #ed8c55; }
}
.element {
width: 50px;
height: 50px;
background: #ed8c55;
-webkit-animation: pulse 3s infinite; /* Safari 4+ */
-moz-animation: pulse 3s infinite; /* Fx 5+ */
-o-animation: pulse 3s infinite; /* Opera 12+ */
animation: pulse 3s infinite; /* IE 10+, Fx 29+ */
}
And that will continuously loop between the two colours.
You can view my code pen on it here.

"Easing-out" an infinite CSS rotation animation when another div is clicked using jQuery

I'm trying to use jquery to bring a constantly rotating div (using CSS animation) to a slow, smooth stop when another div is clicked.
I've been attempting to change the "animation-timing-function" property from "linear" to "ease-out", but it just stops abruptly, as opposed to the slow stop I want.
HTML
<div id=click>Click me</div>
<div id=spinner></div>
jQuery
$(function () {
$("#click").click(
function () {
document.getElementById("spinner").style['-moz-animation-iteration-count'] = '1';
document.getElementById("spinner").style['-moz-animation-timing-function'] = 'ease-out';
document.getElementById("spinner").style['-webkit-animation-iteration-count'] = '1';
document.getElementById("spinner").style['-webkit-animation-timing-function'] = 'ease-out';
document.getElementById("spinner").style['animation-iteration-count'] = '1';
document.getElementById("spinner").style['animation-timing-function'] = 'ease-out';
});
});
CSS
#spinner {
width:50px;
height:50px;
margin:20px;
background-color:red;
animation:spin-constant 5s;
-webkit-animation-name: spin-constant;
-webkit-animation-duration: 1200ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin-constant;
-moz-animation-duration: 1200ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: spin-constant;
animation-duration: 1200ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-moz-keyframes spin-constant {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin-constant {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin-constant {
from {
transform:rotate(0deg);
}
to {
transform:rotate(36 0deg);
}
}
Here is the fiddle of the basic concept.
http://jsfiddle.net/jN5vw/1/

Try this one:
See Demo
jQuery:
$('#click').click(function () {
$("#spinner").removeClass('spinner');
$("#spinner").addClass('anim');
});
CSS:
.anim{
width:50px;
height:50px;
margin:20px;
background-color:red;
animation:spin 5s ;
-webkit-animation: spin 1s linear;
-webkit-animation-iteration-count:1;
}
I think this is what you are asking.

How can i make the final state of an animation persist?

I animate the width of an div from 0 to 100%, and after the animation is done i want the final result to persist. Here is what i have until now:
<style>
#element {
background: yellow;
bottom:0;
height:70px;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s;}
#keyframes myfirst {
from {width:0px;}
to {width:100%;}
}
#-moz-keyframes myfirst /* Firefox */ {
from {width:0px;}
to {width:100%;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */ {
from {width:0px;}
to {width:100%;}
}
#-o-keyframes myfirst /* Opera */ {
from {width:0px;}
to {width:100%;}
}
Is there a CSS way or JS to do that?

Use the forwards or both properties:
-webkit-animation:myfirst 5s forwards;
Then the animation will stop at 100% and persist.