I have 5 items in an array. When I reshuffle them I only see animations for items that end up with a higher index - the other just jump to the new spot.
<div ng-repeat="item in items track by item.value" class="TestItem" ng-style="{'top' : $index * 20 + 'px'}">
{{item.name}}
</div>
CSS
.TestItem{
transition: all linear 2s;
position: absolute;
}
How can I make all items animate to their new top position??
The elements that end up with a lower index will be removed from the DOM and inserted at their new positions. When elements are added to the DOM their CSS transitions are not animated (at least not in any of the major browsers).
The rest of the elements will remain in the DOM, get new top values and their transitions will be animated.
Below is a demo using ngAnimate and ng-move to color the moving elements red (the ones removed from the DOM ans inserted again). As described above, these are the elements that do not get their top transition animated.
Demo: http://plnkr.co/edit/7QFMSgo60vQ2qfYzqsBI?p=preview
One solution to this problem can be found here.
Related
I am having a hard time getting a leaflet map to render correctly inside a div in my application.
It's probably worth mentioning I am using angularJS, angular-material (with flex based layouts) and ui-router, so the page that the div lives on is a template for a state being loaded when the user invokes an action to navigate to that page (e.g. through a navbar item click).
My template file for the state is pretty simple:
<md-card>
<div id='map' style="width: 500px; height: 500px;"></div>
</md-card>
In the controller file for the state, I have the following leaflet map initialisation code in place:
this.map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(this.map);
When the map is rendered, the tiles do not get constrained to my div, they spill out:
My dom structure can be found below
The parent element for my md-card becomes scrollable, so when I scroll down I start seeing other tiles too:
My initial thoughts were perhaps I have been trying to render the map too soon, before the div has had time to render. I therefore tried wrapping my map initialisation code in a timeout (2 seconds) and I do see my white md-card show up first when the state is loaded, and then the tiles appear after the 2 second delay, but again they appear as per my screenshots.
The only other thing I can think of is perhaps the usage of flex is having an effect, I am however specifying explicit height and widths on the div holding my map, so I would have thought the map would adhere to that size.
Can anyone offer any suggestions\help as to what could be going on here?
Thanks
Usual symptom of missing Leaflet CSS file
I have a bootstrap grid layout (2 columns) of divs (basically vcard profiles).
It works with an ng-repeat, creating <div class="col-sm-6"></div> for each vcard.
It has a filter box at the top that filters the cards, and it works great.
I would like if when the filters are applied, instead of cards disappearing, reappearing, and moving to their new location instantaneously, I would like them to shuffle into and out of place so we can see the cards move from their current location to their new location to fill the gap left by a card that disappeared.
I have basic animations already working - the cards just fade out. But I'm not sure out to make them shuffle into and out of place. What kind of animation do I need?
EDIT
This is kind of what I want, except to work with ngrepeat filter, not just resize of screen.
http://plnkr.co/edit/Ffgrxq?p=preview
I have a glitch with angular's ng-repeat directive. My HTML is as follow:
<ul ng-show="predictions" id="search-place-predictions">
<li ng-repeat="prediction in predictions">{{prediction.description}}</li>
</ul>
and $scope.predictions is an Array in my controller, that takes between 0 and 5 items. However, at each update of this array, I have a visual glitch of around .2 second where the PREVIOUS <li> are still displayed, and the <li> from the new version of the array are also displayed on top of it. No amounts of $apply() have been able to solve this.
EDIT: I have a transition: border-top .2s ease-out; style applied to my list items. When commented out, the glitch disappears.
It's not a bug, per se. Some browsers don't support animation, but angular will still delay hiding and showing by the animation length it detects in your CSS. Usually affects IE <= 9.
See this answer for ways to disable animations in angular.
I am currently trying to build a slider on my page. The slider slides between different content, which means each slider has a different div height. This makes it hard to use animations since I need to use position:absolute; for those (to slide left/right). To work around this, I added a parent container with a position:relative; and used this directive to get equal height on my divs. However, the problem I am facing is that it only gets the height of the first visible div. Meaning it will work fine if the div with the highest height is shown first, but otherwise it won't work (since content will come outside of the slider).
How can I adjust this so that the equalizer gets the height of each div, and gets the one with the highest value in height, and uses that instead of the only visible one?
Additional info:
Using ng-show to show the current slide, and css3 animations.
The solution was pretty logical. I'm not that great with directives. But after some researching I saw that this directive had a function called equalize() - meaning I could only call EqualizerState.equalize() once I had added EqualizerState to my dependencies.
I have a basic plunker which shows the problem: http://plnkr.co/edit/L3rhEIdrnTucG0M7yGhO?p=preview. When you click on the button the first element is shown/hidden with a bouncy animation. This works fine, but the problem is that the items below it just jump to the new place which is quite ugly and jarring.
So, if you click on the button, item One slides away and then a second later items Two and Three jump up. I'd like everything to slide up while item One slides away. How can this be done? Do I need to drop animate.css and write my own custom animations? How would that work? (I don't really care about the bouncy animation, it should just slide away / back into view.)
The current bouncy animation that you have is using a transform property which isn't going to effect sibling elements. If you did something like animate the margin, other elements would move as well.
You could either change the animation method on your target element, or leave it and additionally animate the target's adjacent sibling. I modified your Plunker demonstrating the latter:
http://plnkr.co/edit/hMaPgRDYC8Z0EeCs6SHQ?p=preview
*This also demonstrations using transitions on the hide and keyframes on the show.
To select the adjacent sibling next to the one being effected by ng-hide, make a css selector with the + symbol:
.item.ng-hide-add + .item {...}
Then by transitioning/animating margin-top, the remaining item elements will get pushed around too.