Search Posts

Category: ng-animate

Animation in AngularJS

I have an animation that changes margin-left of an element that makes some element “appear” and others “disappear”. I had that code in JQuery, but I need to implement that in AngularJS 1.6. I’ve made the margin-left change when needed, but I would like it to be animated like this: (“#container”).animate({ marginLeft: nextMargin+’px’ }, 1000); I am trying something with ng-style, but can’t get it to work: HTML <div class=”container-main-father” id=”container” ng-style=”customStyle “> Angular var […]

How to archive zoomIn and zoomOut animate for ngenter and ngLeave option using angularJs

I need to archive zoom in and zoom out animation when the user enters and leave the page view section, I can able to archive slide left, right, top and bottom animation effect but I am facing the issue in zoomin and zoomout animation when enter and leave the page view section. HTML: <div class=”links”> <a href=”#/first”>First</a> <a href=”#/second”>Second</a> <a href=”#/third”>Third</a> </div> CSS: /* Default view */ .view{ position: absolute; top: 100px; width: 100%; transition: […]

Fade in image on page load

How would I fade in an image on page load using Angular JS, currently this is my code on AngularJS, but it doesn’t work (based off of: View <object type=”image/svg+xml” data=”img/logo-blue.svg” class=”navbar-logo” ng-class=”{‘fade-in’: vm.fade }”></object> Controller vm.fade = true; CSS .animation { opacity:0; transition:all 200ms ease-in-out; } .animation.fade-in { opacity:1; } Source: AngularJS