According to Angular 1.2 ngView docs "The enter and leave animation occur concurrently", so the time-lapse of the ngView update procedure goes something like
add new content > animate entering / leaving one > remove old content
Is there a way how to do it sequentially instead of simultaneously – first removing the old, and just then adding the new one?
animate leaving one > remove old content > add new content > animate entering one
My point here is that my Ctrl of added (entering) content is firing up another events/animations and the previous content of the ngView is interfering with them. Or is there a way how to fire an event after entering/laving animation finishes (from the scope of controller)?
The CSS3 property animation-delay should solve this problem in the most cases. Just delay the fading in animation.
If the animation is more complex you could also think about using CSS #keyframes.
Related
So I have this issue with something like old deprecated <marquee>. Here's fiddle: https://jsfiddle.net/qbqz0kay/1/
It's one (and simpliest) of hundreds of attempts. I can't resolve main issues:
how to remove the gap between end and (new) beginning of the list (it should be like one infinitely scrolling sentence). I've tried with removing first li elements and adding them to the end but it affected overall dimensions of the list and in consequence - the animation was disrupted.
part of the list will be changing once in a while (site is connected to websocket) and every change in its content affect dimensions of the list also. So again - problem with stuttering animation occured.
Any ideas how to handle this? I've seen many ready-made examples but none of them handles those two issues.
Marquee can't help you in this case, as you can't achieve continuous scrolling using this element. Instead, just a bit of javascript might do the trick here. I tried this example which is also very well documented on my own blog and worked perfectly fine, more on this article:
http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm
i am currently using angular 1.2 rc3, i used transition for my ng-repeat items.
however, i found that whenever i change my model for the ng-repeat, the transition goes haywired. You'll see the whole list of items pop down and then disappear. What i wanted to have is just a simple fade out the whole list, and fade in the new items list. How can I achieve that effect?
Here's the plunker to reproduce that: http://plnkr.co/edit/lnsxCySFGmUmAnYDqVm3?p=preview
Just add a few lines, and then change model, you'll see that weird behaviour.
Thanks.
The problem appears to be that when you are switching the list content the new elements are immediately inserted at the top and occupy some space although they are not visible yet. An improvement might be to animate the height as well see this modification of your plunker for an example.
Another solution would be to delay the enter animation when you are switching the list contents completely. First the present elements disappear and then the new ones appear. However, you will probably need an extra class attached to the whole list to make this distinction in your CSS. And you will have to manually handle the addition and removal of the class before and after your switch animation since ng-repeat does not distinguish your switch operation and the addition or removal of single elements.
This onscreen plugin is meant to add classnames only to elements when they are within the viewport, however it seems to be adding the classnames as soon as the page is loaded which isn't what's meant to happen.
$(function() {
setInterval(function() {
$("#star").filter(":onScreen").addClass('animated bounceInRight');
}, 0)
})
I'm using it within this plugin which, is a book effect plugin and I think it conflicts with onscreen in some way: http://pastebin.com/UmyJ6zBW This plugin requires different sections on one page for it to work. Onscreen works when used within the first section but breaks when in others that aren't actually on view. How do I fix this?
You can do one of three things.
Don't bother. In general you don't need to worry about the style of elements that are not in view.
Use setInterval() but reduce the interval to the minimum acceptable value but no less than about 20 ms.
[preferred] Establish an event handler that fires in response to whatever causes your #star element to be moved on/off screen.
For the third approach :
jQuery animations provide for a step callback which fires as each animation step is executed.
As scrolling the document will also cause elements to come in/out of view, you probably also want to a scroll handler.
With care, you should be able to write a single function and use it for both purposes.
I've two (but maybe more) DIVs, animated through jQuery; so now they are running all over my screen, following pseudo random paths.
I want to fire an event every time part of a DIVoverlaps part of another one. Any ideas?
You could use something like this http://sourceforge.net/projects/jquerycollision/ and check for collisions after each animation step.
Take a look at this jsfiddle
http://jsfiddle.net/zB2Td/5/
Animation is triggered although .animate class is added after changing the dimensions.
If you uncomment the second line from the end transition won't start as it should.
Why does this code work like that?
What is a proper way to add .animate and not trigger transition on the previous changes.
Thanks!
To my understanding, what's happening is that the call to box.width() counts as a "Read" operation, as defined by this post. It forces the browser (webkit anyway) to re-layout (aka reflow) the DOM. Without this call, the browser never "knows" that the box was 200x200 prior to .animate being added, and it assumes the box started out at 100x100.