Plunker
This plunker shows an array displayed as a list using ng-repeat
Each array item has an up and down button allowing it to to change position with the array item above or below.
I'm also using angular-animateto flash each item red when it's position is changed.
But what I'd like to do is flash red the item moving up and and flash blue the item moving down.
Any suggestions welcome
I'm not an expert at angularJS, but, I do have an idea:
http://jptacek.com/2015/03/angularJS-CSS-Animation/
There are five AngularJS events
enter - DOM element is add to the DOM tree
leave - DOM element is removed from the DOM tree
move - DOM element is moved within the DOM tree
addClass - A class is added to an element
removeClass - A class is removed from an element
So, although "move" is only working on the button you are clicking, you can change your javascript to add a class to the other elements that you swap with and move.
Then you can trigger the CSS animation by using something in your css following the
[class]-[event]-[state]
model, where it can be like
.ng-addClass { ... }
.ng-addClass-active { ... }
Related
I have several list components in a tree-like data structure and I want to animate them in a way that when I click on an item, its children slide in from the right and at the same time the previous list slides out to the left.
I used an array for this with react-transition-group, if I add items to it, it works, but if I try to remove one from it, it fails.
I have a demo here:
https://codesandbox.io/s/k1wyqo64lo
If I uncomment line 91 path.shift() it stops animating.
How can I make them animate at the same time?
I am toying with an idea of rewriting our current Backbone-based app in React. One piece of functionality that is giving me headache is keyboard navigation. The app must be navigable using keyboard. Here is roughly what this looks like:
There is a header element with several buttons. There is also a main area with navigable elements that is built dynamically, from the results of a network request. The elements in the main area are arranged on the screen in a sort of grid (usually, 2 rows of 3 elements each, though on the mockup I showed rows of 2 elements).
The focus is initially on Element 1 (though if no elements have been fetched, then I guess a header button should be focused). Using arrow keys, one should be able to navigate within a component (from Element 1 to Element 2 with the right arrow key; from Element 2 to Element 1 with the left arrow key; from Element 1 to Element 3 with the down arrow key, and so on), and between components (from Element 1 to the header’s Button 1 with the up arrow ket; from header’s Button 1 to Element 1 with the down key, etc.). The elements that don't fit on the screen should be brought in view with the press of an arrow button when focused on an appropriate element (e.g., pressing right arrow when focused on Element 2 should "scroll" the main area to the right and bring Element 5 into the viewport).
Currently, in the original Backbone-based app, this functionality is achieved by adding a custom attribute to all navigable elements and then using a third-party jQuery-based library that calculates the absolute positions of the elements on the screen and moves the focus from one element to the next depending on how they are positioned relative to each other. What would be an idiomatic React (+ Redux, if possible) way to reproduce this behavior?
My recommendation:
Add and event listener to the container component for the elements. Set up an event listener in componentDidMount with a callback that somehow calculates what the next element is based on what button it was (hard for me to advise on this--if you are strict about only having 4 per page with max 2 rows, then you can do something like (left) => current - 1, right (right) => current + 1, (down) => current + (count / 2), etc). That will fire an action like
{ type: ELEMENT_SELECTED, payload: { selectedElID } }
or if you're just keeping it in local state, this.setState({ selectedEl })
Then in your render function, always make sure that its rendering with the selected element in view.
Does that make sense?
I've come across with this old post today, but maybe a good solution for this kind of problem could be React-Navetree lib. It calculates distances between node to resolve who is the next/previous node, but it doesn't keep an active one.
I am removing an element in ng-repeat using javascript splice method ..elements of my ng-repeat are in two rows not in list styles ...now i need to apply a animation on the rest of element(not on the element being removed. when rest of element re adjust them..according to their position ...mainly i need to show the animation when they move from one place to another .
This forked Plunker shows two ng-repeats each displaying an array as a list. Each list item uses a custom directive to animate whenever an up or down arrow is clicked.
The first list, which records changes to array item values animates correctly but the second, which records changes to array item indexes does not.
Can anybody suggest how to edit the directive to animate the second list correctly?
The way you move the elements triggers incorrect animation. Try to do it like this
function arrayMove(arrayVar, from, to) {
var item = arrayVar.splice(from, 1).pop();
arrayVar.splice(to, 0, angular.copy(item));
}
You need to make a (deep) copy of the element to preserve some properties like $$hashkey used by AngularJS to track the objects.
I want to synchronize the movement of an angular bootstrap directive carousel with an animation of another image.
i.e. when the carousel switches to show the 5th slide, I want to show the 5th image from some array.
I am guessing that the "angular way" to do something like this would be to bind the current index of the slide to some common "upper in the hierarchy" scope and then create a directive that will show the Nth image from my second data source.
but It just does not seem as if the carousel controller is exposing this information...
how do I "extract/bind to" the index of the current slide?
you can just use {{$index}} within the scope of your slides to access the active slide index