Home > angularjs > Animations does not working with angular

Animations does not working with angular

January 11Hits:0

I am learning about Angular and I tried (just for learn) 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 whit thinks in my firebase url, and this part is ok.

I used ng-repeat to loop into my objects in firebase and works, but the animations does not working, I let the original products and the products from firebase to verify,animations the original products work perfectly and my objects from firebase are included in the grid fine but the animations still not working.

The original project when 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 are render few seconds after than 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.

Related Articles

  • Transition animation does not work in AngularJanuary 25

    Could you please take a look at code snippets and let me know why the animation does not work, for example no opacity change and no background colour change. Please note that the code is entirely taken from a book so I am really confused how it canno

  • Animations does not working with angularJanuary 11

    I am learning about Angular and I tried (just for learn) 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

  • JavaScript Animations in AngularJS ApplicationsAugust 21

    AngularJS is a feature-rich framework for creating single-page web applications, bringing all capabilities that one needs for building rich and interactive apps. One of the key features that Angular brings is the support of animations. We can animate

  • Angular - after deleting from ngRepeat, remaining items don't slide smoothly but rather snap/jump into place

    Angular - after deleting from ngRepeat, remaining items don't slide smoothly but rather snap/jump into placeJanuary 28

    I'm using the AngularJS v1.4.8 and I included/injected ngAnimate in my controller. I am building a dynamic list using ngRepeat, which is bound to an array. Adding and updating items in the list works perfectly and animations run as expected. However,

  • How can I make a Canon 550D shoot continuously for longer than 15 seconds?July 9

    We have a Canon 550d and have purchased a turntable to create spinnable products on our website. However, we are having an issue. The turntable takes exactly 60 seconds to perform a full rotation, however on continous shooting the camera only goes fo

  • AngularJS Modal Form LoginFebruary 12

    First of all , I m new in angularJS. And I m using in my first App the following versions : AngularJs 1.5 Bootstrap 3.3.6 my First AngularJS App is structued like the following : index.html ----js:app.js -------controllers:controller.js -------servic

  • jQuery SlideIn Animation to CSS Animation in Angular

    jQuery SlideIn Animation to CSS Animation in AngularJanuary 20

    Yesterday I tried to create a slidein effect of three overlapping divs in CSS Animation but failed. Even though angular provides the extra classes I was not able to accomplish a smooth transition. What I would like to achieve can be seen here (solved

  • Angular animated ng-repeatJanuary 21

    I am using Angular 1.4. I have a list of elements, built using ng-repeat, that can be slided to be removed. I am looking for a way to use ng-enter, ng-move and ng-leave to do pretty animations when one element is removed. I found examples but they al

  • angular material animations and ui-routerJanuary 21

    I'm using angular-material and ui-router within an angular-meteor project. I managed to successfully use ui-router with angular-material and everything's working except for one thing: if you notice, angular material tabs have a tiny animation making

  • angular-material and cordova : poor animation performance on androidJanuary 21

    Any suggestions to make cordova + angular-material app run animations faster and smoother on android ? Even on latest build of angular-material, animate is too bad on android devices.

  • Is it OK to use jQuery in Angular directives to perform animations?January 23

    I wrote a simple directive for my sidebar to perform some basic animations, such as sliding in and also modifying the width and margin of the content class. My question is that is it OK to use jQuery animations in this way: //sidebar directive, slide

  • Javascript toggle animation of height in AngularFebruary 1

    I have the following animation defined in my Angular app for toggling the hight/opacity of an element. It works as expected, however I'm now using it to toggle a 'main menu' and the 'sub-menus' within. When the main menu is opened it increases from 0

  • angular animation not workingFebruary 15

    I am new AngularJS.I am not able to apply animations to my text and button. I am not getting any error in the console. i have no idea where its going wrong. I want different animations to my text and button. I have provided css animation link in the

  • Wrapping a small animation library for AngularDecember 29

    I've started out working on a larger project using Angular for the first time. For visual feedback, I'm using Waves (Github) (you can see a demo page here). The standard way to use Waves is to include the script along with its CSS on the page and onc

  • Angular 2's Animation Builder easing functionJanuary 17

    The documentation is unclear about this one - is there a way to change the easing function (e.g., ease-in, ease-out) when using angular2 AnimationBuilder? I tried to set the animation-timing-function in the from/to styles but without luck.

  • First item doesn't get animation with angular ng-classJanuary 20

    It might be a simple question, but I'm stuck on this one for 3hours, I don't understand why the first element doesn't get animated. In my html I have : <md-button class="md-fab md-mini md-primary {{produit.dispos[0] | ifNull:'disabled' | ifTrue:'e

  • Angular animation inside ng-include partialsJanuary 22

    My animations works only with parent elem, like so: <div class="someanimation-class" ng-include="dynamicTemplate"></div> But partials, which been loaded by this include, doesn't get animations. This partial won't animate: &

  • Angular js dir-paginate with animationsFebruary 8

    I am using dir-paginate with filtering and ordering.I want to implement animations for better UI and i cant seem to find a reference. I am aware of http://www.nganimate.org/angularjs/ng-repeat/yo-yo-css3-keyframes-animation but this seems to work for

  • angular, in directive, adding to the template an element with ng modelMarch 26

    I'm trying to add an input element with ng-model inside a directive. my code the link function of my directive: link: function (scope, element, attrs) { var elem_0 = angular.element(element.children()[0]); for (var i in scope.animals[0]) { elem_0.app

  • coffeescript and angular directiveApril 14

    I feel this is deeply inelegant, but I really want the option of classical inheritance in the future. How could this be written better. FYI animation here is from GSAP if you are curious. class Modal angular.element(document).ready => @modalElem = do

Copyright (C) 2018 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.509 s.