问题
I am learning about Angular and I tried (just for learning purposes) to add Angular in a public project that already exist, is a single page app to compare products and the animations are very cool!
The products are in the html code directly and I added firebase to fill the grid with things in my firebase url, and this part is ok.
I used ng-repeat to loop into my objects in firebase and it works, but the animations are not working, I let the original products and the products from firebase to verify, animations in the original products work perfectly and my objects from firebase are included in the grid fine but the animations are still not working.
The original project where you can find the details is: http://tympanus.net/Blueprints/ProductComparison/
My controller is pretty basic:
angular.module('todoAp', ['firebase'])
.controller('ControladorTareas', function($scope, $firebaseArray) {
var url = 'https://<my url>/';
var refLibros = new Firebase(url);
$scope.libros = $firebaseArray(refLibros.orderByChild("estatus").equalTo("disponible"));
});
I see that my objects from firebase render few seconds after the page is loaded, and maybe that is the issue, but I don't know how to add Angularjs and Firebase in this project and the objects returned from firebase take this animations.
Here are the images:
This is the original project: This is the original animation 1 you select a product and the border color change and at the top of the screen a little section appears with a button "Compare" This the second animation, when you select two elements click "compare" and this happens with a cool animation:
Here are my two objects from firebase in the original grid next to the original elements:
And when I try to make the "compare" process with my objects don't move and the border color does not change either, actually the little section with the compare button doesn't appear.
Please help me to understand the way to add Angular and Firebase in this project, thanks in advance.
来源:https://stackoverflow.com/questions/35562167/animations-are-not-working-with-angular