If I load async data in my app. NgRepeat only animates the first element in an array.
jsFiddle
html:
<div ng-repeat="x in data"></div>
css:
.box.ng-enter {
-webkit-transition: all 2s ease;
transition: all 2s ease;
opacity: 0;
top: 20px;
}
.box.ng-enter-stagger {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.box.ng-enter.ng-enter-active {
opacity: 1;
top: 0;
}
In this example I use $timeout to simulate an async datasource.
Why is that.
Thanks!
My guess is this was a bug that has since been fixed. There have been a large number of changes to the animate module since the 1.2.* release.
Here is a JsFiddle that has the latest source from git for the animate module embedded and the issue has gone away. If you need this functionality then it is probably best for you to load in your own version of the animate module using the latest source.
Here you can compare the 1.2.* branch to the master branch look for "src/ngAnimate/animate.js" to see all the changes to the module.
Ignore - needed to get the fiddle link to work i get the motivation
behind requiring code along with a fiddle but in this case it actually makes
little sense the only modification made to the original was the addition of
1600 lines of code taken from the latest version of the module. I'm not
putting that in here.
Related
I've built an app where I browse instagram API and fetch photos. After that is done I use Handlebars to make a template with undordered list and images inside. I'm trying to get images to slowly fade in as soon as the template is loaded, but to no avail. So far it looks like this
In my template I add class hidden that sets the opacity to 0, so then I can just remove the class to show the image.
<template id="image-template" type="text/x-handlebars-template">
<ul>
{{#each this}}
<li>
<img class="hidden" src="{{url}}">
</li>
{{/each}}
</ul>
</template>
After setting everything in JS
var template = Handlebars.compile( source.html() )
var html = template( images )
$('#container').html( html )
At this point I should have the images in the container, so I should be able to use
$('img').removeClass('hidden')
and have images slowly fade in, however thats not happening.
After a bit of investigating I realised that those images aren't quite available for me, so I set up a pub/sub after adding template to html
$('#container').html(html)
$.publish('insta/photoTransition')
I was sure that calling another function after this would work, but still no result. After that just out of ideas I setTimeout before publishing, and what do you know, my assumptions were true and with a delay it finally worked. However I don't want to wait a set amount of time to show the photos, I would like to show them as soon as possible. Before I try to figure out how deferreds work to try my last idea, are there any better ways to solve my problem?
Just use css transitions.
#image-template img{
opacity: 1;
transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-webkit-transition: opacity 0.4s ease-in;
}
#image-template img.hidden{
opacity: 0;
}
I tried to use animations within my app but unfortunately to no avail. I checked lots of examples, blog, downloaded animate.css etc etc.
I injected animation module, tried basic examples, tried following tutorials for instance, but it seems I miss something every time.
Can someone please provide exact instructions for AngularJS v1.2 animations to work, with injections, inclusions and everything you need to do to get them working? Maybe a step-by-step instructions on how you usually do your animations.
A basic fadein/fadeout example on ng-show/hide would suffice.
Thank you very much
Reference angular-animate.js
Add ngAnimate as a dependent module:
myApp = angular.module('myApp', ['ngAnimate']);
Add a div to your view with the ng-show directive and for example the two classes 'fadein' and 'fadeout':
<div class="fadein fadeout" ng-show="show">I am the div.</div>
Add the classes to your css. In 1.2 ngAnimate is class-based and you need to add certain suffixes to your classes based on a certain naming convention. A good source of information regarding this can be found here.
Example:
/* Fade in ngShow */
.fadein.ng-hide-remove {
-webkit-transition: 1s;
transition: 1s;
display: block !important;
opacity: 0;
}
.fadein.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
/* Fade out ngShow */
.fadeout.ng-hide-add {
-webkit-transition: 1s;
transition: 1s;
display: block !important;
opacity: 1;
}
.fadeout.ng-hide-add.ng-hide-add-active {
opacity: 0;
}
Add logic to change the expression that is provided to the ng-show directive and the div should fade in and out.
A working example: http://plnkr.co/edit/lq4LmUq5mrbJBGMMEyh9?p=preview
Im currently in a deep learning process for a school project. After a month I perfectly understood the concept of css3 and html, including, but very limited, some basic javascript.
I have read alot of tutorials and have found a new one which includes a demo which is truly fascinating to me. It uses a drop down menu list to trigger the page transition effects. Studying the code it starts to make sense to me. However, im starting to wonder how to to apply seperate individual buttons instead of creating list items as a trigger.
I have no clue where to start or which part of the code has to be changed. I would be happy for some feedback.
The Demo: http://tympanus.net/Development/PageTransitions/
Even i wondered the same. with their code i extracted few classes and created example in fiddle.
For animations code go through their animation.css and use required animation classes. for example i have extracted this class
.pt-page-moveFromRight {
-webkit-animation: moveFromRight .6s ease both;
animation: moveFromRight .6s ease both;
}
#-webkit-keyframes moveFromRight {
from { -webkit-transform: translateX(100%); }
}
#keyframes moveFromRight {
from { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
Check out example here:
http://jsfiddle.net/zb5nacc8/1/
you can try this: https://github.com/icodebuster/transition.js plugin
they use the same code only they are separate buttons that trigger the transitions
I'm working on creating a mini-sort plugin with jquery.
I want to have the option to trigger css animations on click event, but I found out animation don't get triggered on elements that have been hidden using display: none;.
I tried with creating a class and applying that class to the element but this won't work.
$('.legend li').on('click',function(){
var thisClass = $(this).attr('class');
$('div').not('.'+thisClass).removeClass('active');
$('div.'+thisClass).addClass('active');
});
I found a plugin which has the same functionality that I wan't but I would like to try to build something smaller and I always like to attempt myself as a learning experience before resorting to plugins. I'm a bit confused as to how they run the animations. It looks like inline css but when I tried to add inline transitions there was no effect. Even though I could see the transitions in the style tag.
Edit
Here is a fiddle.
http://jsfiddle.net/NktDU/1/
You could use jQuery's hide and show instead
Updated demo
$('#grid div').not('.'+thisClass).hide("fast").removeClass('active');
$('#grid div.'+thisClass).show("fast").addClass('active');
and remove display:none from the CSS
Or you could do it just using CSS transitions and toggling the width, like so
#grid div {
display: block;
height: 20px;
width: 0px;
margin:0px;
float: left;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
background: black;
}
#grid .active {
width:20px;
margin: 2px;
}
Demo for that
I think the library you would have to write for something like this is immense. In this case, I highly recommend you work on implementing Isotope by David DeSandro.
Is this the plugin you were talking about? I can assure you that while you want to come up with your own solution, you can make isotope your own. I've implemented it a couple of times. You will learn a lot, while at the same time, learning how jQuery/JS/CSS (and media queries) work together.
I've implemented the click to sort, and I also created my own sort by keyword search. I can put together a couple of fiddles if you want...
Edit:
I just saw the link to the plugin you found... it actually uses isotope's framework and recommends you use isotope in certain situations.
Good luck!
if i apply a style to an element and immdiatily afterwards add css transition styles, the transition is applied to the style preceeding. this might not always be the intention.
i found a solution by using settimeout (0), is there any cleaner/more correct approach known ?
http://jsfiddle.net/nicib83/XP9E7/
$("div").css("opacity", 1);
$("div").css("-webkit-transition", "all 0.35s");
/* Works
window.setTimeout(function () {
$("div").css("-webkit-transition", "all 0.35s");
}, 0);
*/
best regards
Edit:
i didn't mean how best to set css styling but how to sequentially set styles when the first style should be applied without the second being active at that time but only afterwards, i wan to add transition afterwards. settimeout fixes it, best solution ?
It's much better to pre-define a class that contains both of the properties you want to apply, and add that class programmatically to the element. Both of the properties will be applied together.
.myClass {
opacity: 1;
-webkit-transition: all 0.35s;
}
$("div").addClass("myClass");
You could take a page from the book of Twitter Bootstrap:
fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-moz-transition:opacity 0.15s linear;
-o-transition:opacity 0.15s linear;
transition:opacity 0.15s linear;
}
.fade.in{
opacity:1;
}
then programatically add the .in class when you want it to fade in:
$("div").addClass("in");
with your original div looking something like:
<div class="fade">Box</div>
I've been running up against this myself and also found the setTimeout solution. After some research the issue is how the browser handles scheduling. The JavaScript runs in its own thread separate from the threads dealing with the UI and the DOM (which is why issues like UI blocking happen).
In cases like this both JavaScript statements run before the document registers the first change and it ends up applying both classes at the same time. setTimeout(fn,0) effectively makes the function asynchronous and shunts the functions to run at the next available opportunity. This allows the UI thread to catch up before the next class is added.