I'm using the unslider plugin.
All i want is to trigger the animate.css class on the elements inside the slider only when the current slider is on.
If i'm not mistaken, unslider adds a class .active in the current active slider, so what i tried to do is to put a "test" class inside the elements i wanted to animate and then add this css:
.active .test{
-webkit-animation-name: bounceIn !important;
animation-name: bounceIn !important;
-webkit-animation-duration: .75s !important;
animation-duration: .75s !important;
}
It does not work, though.
You can see it online here: http://www.felipegrin.com/test-two/
Related
I have a flash message div at the top of my page for when the site wants to display any messsages to the user.
I want the flash message to fade out after a couple of seconds. I'm using a CSS transition.
Here is my code:
.flash {
position: fixed;
opacity: 1;
visibility: visible;
transition: opacity 2s ease-in, visibility 2s ease-in;
}
.hide {
visibility: hidden;
opacity: 0;
}
document.querySelectorAll('.flash').forEach(function(flash){
flash.classList.toggle('hide');
})
I expect that when the page loads, the div will be visible before fading out. But, in Safari, when the page loads, .flash is invisible.
In Chrome, the page loads and the .flash div fades as expected. However, on reloading the page, the div still has the .hide class attached and so the flash message remains invisible. (I can store state in HTML?!!) Strangely, in Chrome, it works if I'm inspecting an element in the document with developer tools when I reload the page.
Now I'm highly confused.
Why does .hide remain attached to the div across page reloads?
Why does Safari fail to display the div at all?
EDIT: after your comment reply, what you need to do is trigger the fadeout on a focus event.
.flash:focus {
//use the fadeout code here
}
The reason is the toggle, your browser saves the state of the page in the browser's cache but not the javascript that is dynamically changing the css on reload, on and off.
Instead of manipulating the css with javascript, google fade out with css.
.fade-out {
animation: fadeOut ease 10s;
-webkit-animation: fadeOut ease 10s;
-moz-animation: fadeOut ease 10s;
-o-animation: fadeOut ease 10s;
-ms-animation: fadeOut ease 10s;
}
#keyframes fadeOut {
0% {
opacity:1;
}
100% {
opacity:0;
}
}
it's a lot smoother this way, and you can test it more easily with the developer tools.
Various elements of the webpage have a background transition on them changing from color to color:
#-moz-keyframes backgroundTransition /* Firefox */ {
0% {background-color:#ff7b7b;}
33% {background-color:#7fceff;}
66% {background-color:#80e880;}
100% {background-color:#ff7b7b;}
}
#-webkit-keyframes backgroundTransition /* Safari and Chrome */{
0% {background-color:#ff7b7b;}
33% {background-color:#7fceff;}
66% {background-color:#80e880;}
100% {background-color:#ff7b7b;}
}
However, if an element is display: none and then displayed later through javascript, the color isn't consistent with the other elements, it starts the loop from the 0% color.
Is there a way to keep the transition universal? Thank you for your time.
Have you tried hiding the elements by making their opacity:0 and then setting it to 1 to unhide them? That should allow the background color to transition with all the other elements, but keep the element invisible.
Byh the way, the keyframes CSS directive is well supported by all major browsers at this point. There is no longer a need to use vendor prefixes with it.
document.querySelector("button").addEventListener("click", function(){
document.querySelector(".hidden").classList.remove("hidden");
});
div {
width:50px;
height:50px;
background-color:black;
border:1px solid black;
animation-duration: 8s;
animation-name: backgroundTransition;
}
/* The hidden elements will not take up space in the
normal document flow and will not be visible because
the will be 100% transparent. Simply removing this
class when its time to see the element(s) puts them
back into the normal flow and their background will
be the same as all the other div elements. */
.hidden { opacity:0; position:absolute; }
#keyframes backgroundTransition{
0% {background-color:#ff7b7b;}
33% {background-color:#7fceff;}
66% {background-color:#80e880;}
100% {background-color:#ff7b7b;}
}
<div></div>
<div class="hidden"></div>
<div></div>
<button>Click me during the animation to reveal the hidden div,<br>which will have its color in sync with the other div elements</button>
I don't think you can handle it using visibility css attribute or you cant cuz whenever it gets rendered it will start from 0
Transitions didn't work for element not rendered by browser, but work's for element 'hided' ;) try antoher option to hide your element:
opacity: 0
height:0; width:0;
z-index: <val>
I am using the animate.css classes on my page.
Currently I have all animations built on hover function.
For example:
#folder:hover .middle-button{
animation-name: slideRight;
animation-duration: 1s;
animation-timing-function: ease-in-out;
visibility: visible !important;
}
I would like to activate these animation classes on scroll and my question is:
What would be the easiest way to trigger this class using a Javascript function?
This is the best I can do: http://codepen.io/zvona/pen/ovDbk
It will add class visible to all the elements with className onAppear.
So, you can add class for all the elements that you want to animate on appear:
<div class="onAppear">This will be animated.</div>
And then on CSS (transition example, not animation - figure it out by yourself):
.onAppear {
transition: transform 500ms;
}
.onAppear.visible {
transform: translate3d(250px, 0px, 0px);
}
Hope this helps.
Dearest stackoverflowers,
I'm new to Angular JS and have read some stuff on how to animate the Angular way, still I'm very much confused on how to correctly implement it and what classes get added when and where. I feel like I had much more control over my animations with traditional jQuery (adding and removing classes). But maybe this is just because I'm used to it that way.
On pageload I want certain elements to animate in. So in my controller, on pageload, a variable (pageLoaded) gets set to true. And my surrounding content-wrapping div will have ng-show="pageLoaded".
This way I have successfully added an animation on the entire page using following CSS transitions/animations:
.page.ng-hide-add, .page.ng-hide-remove {
display:block!important;
}
.popup.ng-hide-add {
-webkit-animation: 450ms bounceInRight reverse;
}
.popup.ng-hide-remove {
-webkit-transform: translateX(100%);
-webkit-animation: 750ms bounceInRight;
}
But once I try to address child elements, the animations fail.
.page.ng-hide-add .child, .page.ng-hide-remove .child {
display:block!important;
}
.popup.ng-hide-add .child {
-webkit-animation: 450ms bounceInRight reverse;
}
.popup.ng-hide-remove .child {
-webkit-transform: translateX(100%);
-webkit-animation: 750ms bounceInRight;
}
Is this not supported by Angular? Or am I doing something wrong?
And if I understand correctly, no matter if you're using ng-hide, or ng-show..
the ng-hide classes should be used? Where they follow following logic:
ng-hide-remove/ng-hide-remove-active show the element
ng-hide-add/ng-hide-add-active hide the element
Can someone explain the difference between the regular and the active classes? How should they be used?
It seems that Angular scans the document for things to animate, I have found that when wanting to animate a child element. You have to set a transition on the parent for as long as you want the children to transition.
For example.
.page.ng-hide-add, .page.ng-hide-remove {
-webkit-transition: 1000ms;
}
.page.ng-hide-add .child, .page.ng-hide-remove .child {
display:block!important;
}
.popup.ng-hide-add .child h1 {
-webkit-animation: 450ms bounceInRight;
}
.popup.ng-hide-add .child h2 {
-webkit-animation: 750ms bounceInRight 250ms;
}
Angular will only add the 'animation' classes, if the HTML element with the NG-IF/NG-SHOW or ng-whatever element has a transition in the CSS specified for it.
I have a section on my website that when a user clicks I would like it to expand, I'm using the jQuery's toggleClass for this...
expandable: function(e) {
e.preventDefault();
$(this).closest('article').toggleClass('expanded', 1000);
}
This is working fine, only I'd like to somehow animate it. In chrome my article slowly grows to the new size, only in Firefox it 'instantly' resizes itself with no animation, is there a way to have this animate?
jQuery UI extends the jQuery native toggleClass to take a second optional parameter: duration
toggleClass( class, [duration] )
Docs + DEMO
.toggleClass() will not animate, you should go for slideToggle() or .animate() method.
You can simply use CSS transitions, see this fiddle
.on {
color:#fff;
transition:all 1s;
}
.off{
color:#000;
transition:all 1s;
}
I attempted to use the toggleClass method to hide an item on my site (using visibility:hidden as opposed to display:none) with a slight animation, but for some reason the animation would not work (possibly due to an older version of jQuery UI).
The class was removed and added correctly, but the duration I added did not seem to make any difference - the item was simply added or removed with no effect.
So to resolve this I used a second class in my toggle method and applied a CSS transition instead:
The CSS:
.hidden{
visibility:hidden;
opacity: 0;
-moz-transition: opacity 1s, visibility 1.3s;
-webkit-transition: opacity 1s, visibility 1.3s;
-o-transition: opacity 1s, visibility 1.3s;
transition: opacity 1s, visibility 1.3s;
}
.shown{
visibility:visible;
opacity: 1;
-moz-transition: opacity 1s, visibility 1.3s;
-webkit-transition: opacity 1s, visibility 1.3s;
-o-transition: opacity 1s, visibility 1.3s;
transition: opacity 1s, visibility 1.3s;
}
The JS:
function showOrHide() {
$('#element').toggleClass("hidden shown");
}
Thanks #tomas.satinsky for the awesome (and super simple) answer on this post.
You should look at the toggle function found on jQuery. This will allow you to specify an easing method to define how the toggle works.
slideToggle will only slide up and down, not left/right if that's what you are looking for.
If you need the class to be toggled as well you can deifine that in the toggle function with a:
$(this).closest('article').toggle('slow', function() {
$(this).toggleClass('expanded');
});
Should have checked, Once I included the jQuery UI Library it worked fine and was animating...