I'm trying to get an ng-show element to animate when it becomes visible/hidden.
But it just acts like a normal ng-show, instand show/hide.
I found this example: http://jsfiddle.net/Kx4TS/1/
which works fine.
yet, if I use the same ng-animate attribute and the same css, it doesn't work in my case.
Is there anything else I need to do or cases where animations won't work?
my code looks like this:
<div style="" ng-show="item.hasMax()"
class="box" ng-animate="{show: 'fadeIn', hide:'fadeOut'}">
and the css is:
.fadeIn-setup,.fadeOut-setup {
-webkit-transition: 1s linear opacity;
-moz-transition: 1s linear opacity;
-o-transition: 1s linear opacity;
transition: 1s linear opacity;
}
.fadeIn-setup{
opacity:0;
}
.fadeOut-setup{
opacity:1;
}
.fadeIn-setup.fadeIn-start {
opacity: 1;
}
.fadeOut-setup.fadeOut-start{
opacity:0;
}
Also, is it possible to make ng-animate do stuff like the jquery slideDown / slideUp animations?
The fiddle example uses Angular version 1.1.4. Make sure you also have a newer version of angular available. I suggest you get the latest version. Right now it is the 1.1.5, which has some important bug fixes.
The animation approach changed with Angular 1.2. Here's an article (year of moo post) that explains the differences. It's much simpler now - doesn't require ng-animate.
Related
When the page loads, I have hidden a div using
#hidDiv{
visibility: hidden;
}
I use jQuery to make it visible.
$('#hidDiv').css('visibility', 'visible');
My question is how do I make it fade in gently instead of appearing quickly?
Note: It's important that visibility: hidden; should be maintained. E.g. can not use hide(); instead of visibility: hidden;
If you don't want to use JQuery,
html:
<div id="theElement" class="hide"></div>
css:
.hide {
opacity: 0;
transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
}
.show {
opacity: 1;
transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
}
*1s is the number of seconds to fade for. Make sure you change all of them.
You can then just change the class with javascript:
document.getElementById('theElement').className = 'show'; // Fade in
document.getElementById('theElement').className = 'hide'; // Fade out
More Reading:
Simple documentation from W3Schools
More thorough documentation from MDN
Compatibility info from caniuse.com
Use jQuery fadeIn()
$('div').fadeIn();
Otherwise, if visibility must be maintained, do
$('div').css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 'slow');
$('div').css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 'slow');
div{
width:100px;
height:100px;
background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div></div>
See Want to use jquery fade in effects, but want to use visibility:hidden initially
As AmmarCSE has stated, if you are using jQuery you can use $("div").fadeIn(); for more control you can also set a timeframe using fadeIn's first argument. ie
$("div").fadeIn("slow");.
This first argument can be one of the built in time values of "fast" or "slow" etc or it can be a time in milliseconds ie
$("div").fadeIn(1000);
The function also has a callback in case you want to do something once the element has finished fading in. It can be used like so...
$("div").fadeIn("slow",function(){
console.log("finished fading in");
});
You can also use fadeOut() in the same manner to fade the div back out... $("div").fadeOut("slow");
The docs on fadeIn() can be found here -> http://api.jquery.com/fadein/
Another option would be to use jQuery's animate() function on the elements opacity. Ie.
$("div").animate({
opacity:0
},"slow");
This is useful if you also want to animate other properties of the element at the same time. ie.
$("div").animate({
opacity:0,
left:200
},"slow");
The docs for animate() can be found here -> http://api.jquery.com/animate/
Another option would to use css transitions like so...
div {
opacity:0;
transition:opacity 1s;
-webkit-transition:opacity 1s;
-moz-transition:opacity:1s;
}
div.fadeIn {
opacity:1;
}
And then use jquery to add or remove the fadeIn class to trigger the fading ie.
$("body").on("click",function(){
$("div").toggleClass("fadeIn");
});
This will fade the div in or out on click of the body.
More info on transitions here -> http://www.w3schools.com/css/css3_transitions.asp
You could also use css animations but I wont go into that here. Hope the extra info helps someone.
Please see the JSFiddle here which shows my issue: http://jsfiddle.net/mlippy/zkH7S/
I'm attempting to shuffle divs up and down a list with those divs moving up hiding the divs moving down. If you look at the fiddle, there are 5 different colored boxes that you can click to tell them to move to the top. If you click various boxes in various positions, you'll start to see the z-index of the boxes moving up not be higher than that of the boxes moving down. If you click the 3rd positioned box repeatedly, that's been a quality reproducer for me.
The angular directive myWidget is applying the indexes through classes which are being added / removed in chained addClass and removeClass calls. See below and the opposite version in the fiddle.
element.removeClass('moveDown').addClass('moveUp').css('top', (newValue * 45) + 'px');
I had thought that this meant the browser was going to complete the first chained call before moving onto the second (and so on). However in this case it doesn't appear to be doing so.
Also in the directive / below, you'll find a working solution using $timeout to delay the change to the css top value which triggers the transition. It's been commented out, but there are comments showing how to toggle to the solution in the two spots code needs to be changed. This feels like cheating / not the correct way for it to be done however. Hence the question here.
element.removeClass('moveDown').addClass('moveUp');
$timeout(function() {
element.css('top', (newValue * 45) + 'px');
}, 350);
This is my first time using AngularJS, so feel free to let me know if I'm using things incorrectly or there's a better pattern which would fix my issue.
Thanks!
You're right, there is a better way to do it.
See, your code for transition affects all properties:
.widget.moveUp {
z-index: 100!important;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.widget.moveDown {
z-index: 1!important;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
So my guess is that your transition to z-index is also taking 1 second to happen.
Guessing that, I've took the liberty to change these lines of code to target a transition only on the top property, which is the only one that should be affect in your case.
.widget {
width: 100%;
height: 40px;
position: absolute;
clear: both;
z-index: 1;
-webkit-transition: top 1s ease-in-out 0s;
-moz-transition: top 1s ease-in-out 0s;
transition: top 1s ease-in-out 0s;
}
.widget.moveUp {
z-index: 100!important;
}
.widget.moveDown {
z-index: 1!important;
}
Here, I updated your FIDDLE
I have the following HTML:
<div id="welcome-content">
// Code
</div>
<div id="configure-content" style="display:none">
// Code
</div>
And (working) jquery that toggles between them:
$('.back-welcome').click(function(){
$('#welcome-content').toggle();
$('#configure-content').toggle();
});
I want to use CSS3 to create a fade effect as I toggle between them. I have tried the following:
#welcome-content, #configure-content{
-webkit-transition: all 400ms;
-o-transition: all 400ms;
-moz-transition: all 400ms;
-ms-transition: all 400ms;
-khtml-transition: all 400ms;
}
However, no animation takes place. What am I doing wrong?
The property display that assign the method toggle () can't be animated with the CSS transitions. Maybe you want to look at fadeIn() and fadeOut().
Edit
I've found this another method fadeToggle() i don't know much about it but you can search and use this:
$('.back-fade').click(function(){
$('#welcome-content').fadeToggle(2000);
$('#configure-content').fadeToggle(2000);
});
Check this demo http://jsfiddle.net/8urRp/14/ *
*I made the divs with absolute position to keep them on the same space
There can only be a transition for a CSS property from one value to another. For a fade transition, the opacity should go from 0 to one.
CSS
.foo {
opacity: 0;
transition: all 400ms;
}
.foo.active {
opacity: 1
}
JavaScript
$('.mybtn').click(function() { $('.foo').toggleClass('active'); })
See this fiddle
Now there is an annoying thing with showing an hiding elements using with CSS transitions. The transition from display: none to display: block is instant, canceling out all other transitions.
There are several ways around this. First you can just use the jQuery fadeOut function. If you do really insist in using CSS transitions have a look at this answer.
I'm stuck here.
How to I transform this:
-webkit-transition:all 0.66s ease-out;
-moz-transition:all 0.66s ease-out;
-ms-transition:all 0.66s ease-out;
-o-transition:all 0.66s ease-out;
transition:all 0.66s ease-out;
into jQuery animations?
I'm using this script, to make an "onload" animation using Packery/Masonry that all items ease from the upper left corner to their positions.
Unforunately this css3 transition is causing a shaking with the packery script when you resize the browser. A solution would be to use jquery animations.
Any ideas?
Unforunately this css3 transition is causing a shaking with the packery script when you resize the browser. A solution would be to use jquery animations.
Or remove the class that adds the transitions after the initial transitions took place.
try:
$('#element').animate({top : 200, left: 200}, 660);
make sure #element has position relative OR absolute.
hope that helps.
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...