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
Related
I want the text to fade in and fade out in the loop never stop it. like, come fade in then out again and again with HTML CSS. I'm going to share with you my code which just does fade in not do fade out and loop also not so anybody sees my code and told me how I can do that with HTML OR CSS because I want to use this animated type text on WordPress website with one build on the Elementor page builder. so please help. Thank You
.fade-in {
animation: fadeIn ease 10s;
-webkit-animation: fadeIn ease 10s;
-moz-animation: fadeIn ease 10s;
-o-animation: fadeIn ease 10s;
-ms-animation: fadeIn ease 10s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
<h1 class="fade-in">Its just fade in not out i want fade in and out in loop never stop it.</h1>
Use animation-direction and animation-iteration properties.
Combined into a shorthand, you get a property like : animation: fadeIn infinite alternate ease 2s
Change duration as necessary
.fade-in {
animation: fadeIn infinite alternate ease 2s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<h1 class="fade-in">Its just fade in not out i want fade in and out in loop never stop it.</h1>
I am creating a dialog window for a program. It will be a simple popup that can display whatever message we pass, as well as an image for success or error.
I can make the WebDialogWindow fade in by simply adding the CSS class "FadeIn3" to the window itself. (Code is below) The window fades into view and works great. I have a button inside the window that will call a Javascript function to close the window. When that's clicked, instead of the window instantly disappearing I'd like to have the window fade away over the course of 1 or 2 seconds. Does anyone know how I can achieve this?
WebDialogWindow
<ig:WebDialogWindow ID="dialogMessage" runat="server" WindowState="Hidden"
Width="300px" Height="150px" Modal="true" InitialLocation="Centered"
CssClass="fadeIn3" StyleSetName="Default">
...
<asp:Button ID="btnCloseWindow" runat="server" Text="Close" OnClientClick="return hideWindow();" />
</ig:WebDialogWindow>
CSS
.fadeIn3 {
-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 3s; /* Firefox < 16 */
-o-animation: fadein 3s; /* Opera < 12.1 */
animation: fadein 3s;
}
#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; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Javascript
function hideWindow() {
oDialog1 = $find('<%= dialogMessage.ClientID %>');
//I think I need something here to add a "fadeOut" CSS class to the window
// that would cause it to fade out. If I add it directly to the
// CSSClass property then the window fades in, fades out, then appears
// until the close button is clicked, at which point it instantly disappears.
oDialog1.set_windowState($IG.DialogWindowState.Hidden);
return false;
}
Do you think jQuery "fadeOut" method would do the work for you?
It would look like something like this:
<script type="text/javascript">
function complete() {
oDialog1 = $find('<%= dialogMessage.ClientID %>');
oDialog1.set_windowState($IG.DialogWindowState.Hidden);
return false;
}
function hideWindow() {
$("#dialogMessage").fadeOut(2000, complete);
return false;
}
</script>
You can set the animation's duration in the first argument (in the example - 2 seconds).
.fadeOut()
I just ended up making 2 fadeInOut CSS classes, one for 3 seconds, and one for 5. Then I apply that class to the dialog window, and call a function called timedHide() with the same number of seconds. That function will wait that many seconds and then call the original hideWindow() function at around the same time the fadeInOut script is finishing up.
CSS
#keyframes fadeinout {
0% {opacity: 0;}
10%{opacity: .2;}
20%{opacity: .4;}
30%{opacity: .6;}
40%{opacity: .8;}
50%{opacity: 1;}
60%{opacity: .8;}
70%{opacity: .6;}
80%{opacity: .4;}
90%{opacity: .2;}
100% {opacity: 0;}
}
Javascript
function timedHide(numSeconds) {
var timeout = 1000 * numSeconds;
setTimeout("hideWindow()", timeout);
}
A page of my website has a news feed where I use AJAX to return each day one at a time and display it. I want each days news to appear with a fade in.
The problem is the fade in repeats, for each day that I return
Html
<div id='newsdiv' class='newsDiv'></div>
Javascript AJAX call
document.getElementById('newsdiv').innerHTML += xmlhttp.responseText;
CSS
#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; }
}
.divFadeIn, .centreScreen, .tbl_houseForm {
-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 3s; /* Firefox < 16 */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera < 12.1 */
animation: fadein 3s;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
If I put the fade in the parent to the new feed, then it'll fade in when the first day is returned, but not for any of the following days.
If I put the fade in on a child div, then it'll fade in when each and every day is returned (i.e. repeating the fade in when the next day is returned).
How do I stop this from happening? How do I stop each day from fading in more than once?
I do understand that each day is only fading in because the div "divNews" is being re-populated. But this understanding doesn't solve my problem.
You should append a new element in your parent div instead of updating the whole content.
You can return json with your ajax call and create the new element on the fly with the returned data on the callback function.
A simple example using jquery :
$.get('your_url',function(data){
var el = $('<div></div>').addClass('animation_class').html(data.key);
$('#newsdiv').append(el);
});
I solved it myself.
I made sure the fade in was done by a div that did nothing else and then before I add the following days news I removed the class name from the div.
var sTempNewsFeed = document.getElementById('newsdiv').innerHTML;
sTempNewsFeed = sTempNewsFeed.replace('class=\'divFadeIn\'', '');
sTempNewsFeed = sTempNewsFeed.replace('class=\"divFadeIn\"', '');
sTempNewsFeed += xmlhttp.responseText;
document.getElementById('newsdiv').innerHTML = sTempNewsFeed;
document.getElementById("clicky").addEventListener("click", changeMe);
function changeMe() {
var ele = document.getElementById("item");
ele.className= "hide";
}
#clicky{cursor:pointer;}
.hide {
animation: fadeout 1s ;
-webkit-animation: fadeout 1s ; /* Chrome, Safari, Opera */
-webkit-animation-fill-mode: forwards;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes fadeout {
from {
display:block;
visibility:visible;
opacity: 1;}
to {
display:none;
visibility:hidden;
opacity:0;}
}
/* Standard syntax */
#keyframes fadeout {
from {
display:block;
visibility:visible;
opacity: 1;}
to {
display:none;
visibility:hidden;
opacity:0;}
}
<a id="clicky">Click me</a>
<br /><br />
<div id="item">I should go bye byes!<br />But instead, I return!!!</div>
I have seen the similar questions aready, such as css3 animation keep reverting to original state
Most of them suggest adding -webkit-animation-fill-mode: forwards; which I have but it doesn't fix the issue because I'm trying to do this in IE 11.
Every time my animation runs, it reverts back to the original state.
It works fine in Chrome, but I need this in IE 10+.
Just add
animation-fill-mode: forwards;
which is the standard syntax for the webkit prefixed version you are using.
http://jsfiddle.net/d2d46zf8/7/
I am trying to animate a text opacity with jQuery animate. I've noticed that when opacity value is set to 1, a bad anti-aliasing effect appears after animation in Chrome (version 35.0.1916.153): see image below.
$('#good').animate({
opacity:'0.99'
}, 2000);
$('#bad').animate({
opacity:'1'
}, 2000);
jsFiddle
I've tested it in Safari (version 5.1.7), Firefox (version 18.0.1) and it works well. I've tried to add the font smoothing filter suggested here but it doesn't seem to work. Is it a known issue?
JSFIDDLE with div
$( document ).ready(function() {
$('#good').animate({opacity: 0.4}, 2000, false, null);
$('#bad').animate({opacity: 1}, 2000, false, null);
});
JSFIDDLE with <p>
Your mistake is you dont use ready event
I recomended use css animation without JS
CSS ANIMATION JSFIDDLE
.pick-opacity_1 {
-webkit-animation: opacity_1 2s;
-webkit-animation-direction: alternate;
-webkit-animation-iteration-count: 1;
}
#-webkit-keyframes opacity_1 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.pick-opacity_2 {
-webkit-animation: opacity_2 5s;
-webkit-animation-direction: alternate;
-webkit-animation-iteration-count: 1;
}
#-webkit-keyframes opacity_2 {
0% {
opacity: 1;
}
25% {
opacity: 0.1;
}
50% {
opacity: 0.3;
}
75% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
UPDATED:
TEST 0.99 JSFIDDLE ANIMATION OPACITY