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.
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
How do I avoid flashing the un-enhanced DOM-element before my javascript has converted it into another type of element?
To be case specific: I have a select with multiple choices, which is converted via a jquery-plugin to a multi-choice-drop-down. But on page load it renders as the multiselect before the plugin runs.
Right now I'm just hiding the select until it's converted, but that leaves an empty space where the dropdown will show up.
Is there any good way avoid this kind of flickering?
Without Javascript:
So this is the situation, the things I've seen about progressive enhancement so far is just to add some CSS to the flickering dom elements, but since this is rather a transformation I'd like to render something in the place where it's supposed to be.
With Javascript:
I hope it's clear what I'm trying to achieve here, any good solutions? Should I render a normal drop-down on the place as a placeholder and then replace it when the DOM is ready? How do I handle the no-js case in that case? The site needs to be available to everyone.
If you adjust your layout to make the multi-select sit below the label like everything else and then clone the select, rebuild it in memory and then swap it in as #elad.chen suggests (possibly via an embedded script after the element or the whole form), you should reduce the jarring flicker. You could also use transitions to smoothly swap the two: shrink the height of the multi-select then swap or fade out and fade in using opacity.
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.
I am using jQuery Isotope for my personal website:
http://www.ryanpays.com
The issues i am facing are when a user clicks either 'Websites' or 'HTML-Email' after the page has loaded there is no animation of the project thumbnails when filtering. However, they do animate when either link is clicked again.
Also i would like to preserve the layout of the 'Clients and projects' section after the animation. It seems to break onto a new row/s when there should be enough room for the last child to be positioned on the first row. When 'show all' is clicked it does not return to the original layout either. I am unsure if there is something i need to do in the CSS to achieve this or maybe re-structure my HTML.
Update
I have worked around this issue by initialising isotope on page load and then again on click. Doesn't look right in IE6 (can live with that for now) and is not really the functionality i would ideally like to achieve.
You need to set your #UL to #UL.isotope because it is adding that class on click, and it needs to already be applied for the css3 animations to work. Just had this issue today, www.mactyler.net you can see it working.
A requirement for a current project of mine involves "highlighting" an HTML element in the context of a page. That is, I need to provide some sort of visual effect that decreases the brightness of the surrounding page while leaving the element at full brightness.
To achieve this, I'm trying the following approach:
Determining the highest z-index value of any element on the page (using JavaScript).
Creating an element to function as a "backdrop" on top of the page. This is just a <div> with a translucent gray background image, sized to 100% of the width and height of the <body> element, with position: fixed. I set its z-index to 1 greater than the highest z-index I've found on the page, with the intent that it will overlay every other element on the page.
Change the z-index of the "highlighted" element to 1 greater than the backdrop. The intent is to allow it to sit on top of the backdrop, which in turn sits on top of the rest of the page.
I got it working on a quick test page:
http://troy.onespot.com/static/stack_overflow/z_index_test.html
but when I tried to set it up on a few actual Web pages, it didn't work in all cases. For example:
http://troy.onespot.com/static/stack_overflow/z_index.html
Here, I've inserted two "dummy" elements on a copy of a Jacksonville.com article page, both with a class of test (if you're looking at the page source, they're at lines 169 & 859).
I also added some JavaScript (using jQuery) at the very end of the page that functions as I've described above.
The first <div class="test"> does function as I'd expect it to. However, the second one does not - it seems to still be stuck beneath the "backdrop" element, despite having a higher z-index.
I think this may have something to do with stacking contexts, but after reading through the relevant W3C docs (http://www.w3.org/TR/CSS21/visuren.html#z-index & http://www.w3.org/TR/CSS21/zindex.html), I still can't fathom why this is happening. I'd appreciate anyone more familiar with z-index and stacking order than I to take a look at my examples and let me know if anything looks suspicious.
Please note that I've only tested these examples in Firefox v3.6.
Thanks very much for any help!
The problem is that the second test div is inside a bunch of other HTML elements, one of which must be creating a new stacking context (it may be the #wl-wrapper-tier-1 div). Basically, a new stacking context is created whenever an element is positioned and has a z-index other than auto, see this MDC article for more info on stacking contexts.
Ultimately this means you can't achieve your desired effect reliably with this method. I think you're probably better off composing 4 divs to surround the target element.
If the element that you're highlighting is inside a different element (stacking context) with a z-index lower than the backdrop, it will not appear higher than the backdrop, since the element's z-index only controls stacking order within that parent.
The only good solution is to clone the highlighted element and add the clone to the <body> tag.
Beware of inherited CSS styles, which would be lost.