Tagged Questions
1
vote
1answer
22 views
Wait Until All Animations Complete Before Removing From DOM with Angular Animation
I'm using the staggered feature for Angular animations (https://docs.angularjs.org/api/ngAnimate#css-staggering-animations).
Is there a way that I can use this and also have the items not be removed ...
0
votes
1answer
16 views
Nested ng-repeat animation
I have been trying to animate a list of elements divided by rows(the parent ng-repeat) and the columns(the child ng-repeat). I have achieved the animation that I wanted with singly ng-repeats. The ...
1
vote
1answer
36 views
Can't get Angular 'staggering' animations working
First time trying to use angular animations and can't work out what I'm doing wrong.
I'm using AngularJS v1.3.0-build.2805 for both Angular itself and Animation module.
-1. Module is included
...
1
vote
0answers
20 views
Animating multiple objects simultaneously in AngularJS produces choppy animation
While attempting to create a slideshow that fades images in and out I ran into this problem. What I found is that when doing animations one at a time, they are smooth and seamless. However when doing ...
0
votes
1answer
29 views
Anuglar-animate. 1.2.9 uncaught object
I've an running an web application with angular.js (1.2.9)
i want to extend it with some animation stuff.
For this i i referenced the ng-animate js-file:
<script ...
0
votes
0answers
15 views
How does form field validation animation work in angular >1.2.14?
Angular 1.2.14 introduced ngClass-like animations for form validation.
I can't seem to get my head around how I would migrate my pre-1.2.14 form animation to use it though.
At the moment, I have ...
0
votes
1answer
40 views
How do I run code after a ngView enter/leave javascript animation is done in AngularJS?
I'm trying to run a function after a page transition animation is done in AngularJS.
Basically, what I'm trying to achieve is, to run specific code per view on certain times, like after enter ...
0
votes
0answers
40 views
Angular JS $scope out of sync when calling a controller
I have trying to get my head around this problem for days,
I have a Game with a question and 3 possible answers.
When a user clicks the correct/incorrect answer the answer animate and then on end of ...
-1
votes
1answer
26 views
angularjs exclude certain elements from animations
I'm using ngAnimate in some places but it's taking over animations for all my ng-class elements. I already had substantial animations code written for various elements that I don't need ngAnimate to ...
0
votes
0answers
24 views
Custome AngularJS route change page with end of animation callback
I created animation whitch is run during route change page. Such like Scotch described here http://scotch.io/tutorials/javascript/animating-angularjs-apps-ngview
It's very good tut but i need to ...
0
votes
0answers
14 views
How to correctly get an element's vertical offset in a directive, to be used with ng-view?
I've written a custom directive that uses the scrollAnimate plugin to create scrolling effects.
I also use full jQuery. And there are view transition animations (ng-enter, ng-leave).
Part of the ...
0
votes
1answer
40 views
AngularJS animate dynamic margin
I have an element that appears when the user clicks a button elsewhere on the screen. The element appears to come out of the top of the screen. The element by default needs to be tucked out of view ...
0
votes
0answers
51 views
Angular JS Animation not calling beforeAddClass
I am trying to create an animation using AngJS 1.2.15
I have defined a directive who's purpose is to create a post element and pass showAnswer boolean to the element.
And created a animation module ...
-1
votes
1answer
33 views
AngularJS animation on click
I'm trying to add a directive that animates the element when it is clicked, but the code in my directive never seems to trigger.
Fiddle
html:
<img class="refresh" animate-spin ...
0
votes
2answers
108 views
How to use ng-leave-stagger with AngularJS Animate
I'm exploring animation in AngularJS and I've run into a problem getting the staggered CSS animations to work. It works fine when new items are added, but when multiple items are removed at the same ...
2
votes
2answers
86 views
AngularJS .ng-enter animation doesn't work on first run
I'm have a strange problem in my AngularJS app; Animation in my tab-slides switching with ng-include, doesn't work for first time, but works good in second or third time.
Here is my test code on ...
4
votes
8answers
370 views
How to implement a flip over effect using AnuglarJS animations?
What would be the best way to achieve a flip over effect using AngularJS animations?
I would like the flip over effect to occur on click. Every time it's clicked, it should flip over to the other ...
0
votes
0answers
35 views
Angular 1.2 Animation Classes never applied to view
I'm having difficulty with applying animations to my ng-view. The ng-enter and ng-leave classes don't ever seem to be applied to the view. The behavior seems to be the same as not having animations. ...
3
votes
1answer
165 views
AngularJS animate on children element works 1st time, 2nd fails
I'm having a weird issue here with angular animation. I'm doing an animation that transitions between screens and changes the direction depending on the "depth" of the screen.
There tricky part is ...
0
votes
1answer
114 views
AngularJS - animating items from one container into another container
I have two divs, one starts empty, the other has some predefined items. On clicking items in one list, the other list gets items added to it.
What I would like to achieve is to animate items from ...
0
votes
0answers
22 views
Prevent jumping with angular-animate on items floated left
I'm using angular-animate in conjunction with angular filter for hiding and showing ads in an unordered list. I have everything working correctly, but when the animation occurs, the list items are ...
1
vote
2answers
97 views
How to create a slide effect with Angular?
I have the following html:
<div>
<div data-ng-click="showContent()" data-ng-show="!visible" class="fly-in-group">{{heading}}</div>
<div data-ng-show="visible" ...
3
votes
1answer
250 views
How to prevent animation from running on element that is initially hidden?
My question is similar to this one and this one, but involves the new animations in AngularJS 1.2.0.
Basically, I have a bunch of elements on my signup page that are initially hidden and only ...
3
votes
1answer
720 views
Angular animate error during loading
I'm developing this angular simple page. I'm using Bower to install components that i need, and the application used to work perfectly. Until I decided to exploit Angular animate library.
At first ...
0
votes
0answers
40 views
Simple angualrjs animate of heights
I've searched for weeks on how to do this and I get how you can animate elements as they "enter" and "leave" the DOM using angular animate and generated css classes (ie. in ngRepeat). What I'm ...
1
vote
1answer
102 views
Fade out element completely before fading another in
As you can see from this jsfiddle:
http://jsfiddle.net/robcampo/pWGuS/
I'm trying to fade out an element and fade another in using Angular animations.
The fading (using opacity and transitions) ...
12
votes
2answers
2k views
Two different animations for route changes
I have the following case: I'm using the ui-router for the routing in my AngularJS application. In one route, there are five child states for different subscreens. I want to animate the transition ...
0
votes
0answers
78 views
Testing an animation which also uses a timeout
I have a factory that generates new directives. Basically the idea is to pop up those directives on a container. They will fade in, some seconds after, they will fade out. The fade out happens on a ...
0
votes
0answers
33 views
Animation doesn't wait until parent has been created
I have a library to popup alerts and what I do is:
When the first alert is going to pop, I create a container div which I append to the body, then I pop the alert.
Basically something like:
...
0
votes
0answers
73 views
What is the correct AngularJS 1.2 way to implement this directive that triggers this animation?
I created a directive that tweens like so:
app.directive('fadeInDown', function ($animate) {
var directive = {
link: link,
restrict: 'A',
};
return directive;
...
1
vote
3answers
1k views
ngAnimate with ui-view
I am having major problems with getting ngAnimate to work with ui-view. The classes never get applied. Please help:
bower.json
"angular": "1.2.0-rc.2",
"angular-resource": "1.2.0-rc.2",
...
0
votes
1answer
123 views
AngularJS animation timing issue
I 'm building an application with a number of slides, and I'm using Angular JS to toggle classes on the elements that trigger CSS animations. The problem that I'm having is that when a button is ...
0
votes
2answers
49 views
Animating child element of ngRepeat on the 'enter' event. How can I avoid the animation for data initialization?
// please refer to the jsfiddle link below for the complete code.
Here is the jsfiddle. Basically, the animation works just the way I want, but I don't want the it to occur for data initialization. ...
0
votes
2answers
210 views
How to initialize an Angularjs css3 animation using Javascript
I am currently trying to do a CSS3 animation in Angular.js.
Before animating I try to set the initial css properties using Javascript.
So, is there a way to initialize an animation using Javascript ...
1
vote
0answers
65 views
Weird thing going on with nested directives AngularJS
I am having a problem with nested directives, in particular within the hide-element directive.
Firstly, there is an edit-mode directive that does not seem to work with ngAnimate. It would still hit ...
1
vote
1answer
232 views
AngularJS Animations with JavaScript
See this JSFiddle: http://jsfiddle.net/5mUsH/3/
I'm trying to do a really simple JavaScript animation in AngularJS and jQuery. (I'm not using CSS animations because I want to support older browsers ...
0
votes
0answers
26 views
How to keep forward my CSS3 animation's final step using ngAnimate?
I am trying to use ngAnimate, i would like to keep forward my CSS3 final step (using the animation-fill-mode property i guess) but it doesn't works, how do you do it ?
.my-special-animation.ng-enter ...
2
votes
1answer
371 views
Use effekt with angularjs
How use effekt animation with angularjs
http://h5bp.github.io/Effeckt.css/dist/?
Anyone can create a exemple to use this with angularjs?
0
votes
0answers
33 views
AngularJS animation leave fires but disapear instantly
I have an Angular animation using jQuery to slide in and out views when changing the views.
erpmApp.animation('.slideView', function() {
return {
enter : function(element, done) {
...
1
vote
1answer
103 views
Animate element moving between lists
Using AngularJS, I would like to animate an element being added to one list from another, as in a clone of the element should appear to move in the page from the menu of items, and be added to the ...
0
votes
1answer
118 views
AngularJS animate navigation
I have a HTML mockup like this
<div id="headbar" ng-swipe-left="ToogleMenu()">
<div id="menu" ng-hide="menuTogglestate">
<ul>
<li><a ...
1
vote
0answers
126 views
show/hide transition not triggering properly because of ng-animate
Angularjs 1.2.6 scenario: 2 inputs, 1 textbox (sounds kinda dirty). The inputs both trigger a show / hide transition on blur / focus events and focus always comes after blur if click from one input to ...
0
votes
0answers
22 views
Animate item being moved between two ngRepeaters in AngularJS
I have two ngRepeaters in my AngularJS APP. If a user clicks a button on one of the items in a ngRepeater, then that item is removed from it's current ngRepeater and added to the other.
To make that ...
0
votes
1answer
142 views
Animating view navigation forwards and backwards
So, Angular 1.2 has full ng-animate support, and I've been using it for page transitions - initial setup was easy enough, awesome. Forward animations (left-to-right), no problem. Backwards navigation? ...
1
vote
1answer
2k views
AngularJS 1.2 ng-show height animation
I'm trying to get a height animation working using Angular JS 1.2. I've got a plunker here that has the animation working for closing the item:
http://plnkr.co/edit/YVtnXgjO3Evb6tz5DJOp?p=preview
...
2
votes
1answer
299 views
Using AngularJS' ngAnimate when removing an item from scope
Very simple question: In AngularJS 1.2.x, is it possible (and how) to get ngAnimate to fire when removing an item from scope?
Here's an example Plunker:
...
0
votes
1answer
116 views
angular ng-animate causing weird animation on model changed
i am currently using angular 1.2 rc3, i used transition for my ng-repeat items.
however, i found that whenever i change my model for the ng-repeat, the transition goes haywired. You'll see the whole ...
1
vote
1answer
590 views
Make a smooth animated css3 rotated div with angularjs
Thats my fiddle:
http://jsfiddle.net/7kLde/48/
The rotation of the div is rather a flip... not a smooth rotation.
I use the latest version of
angularjs 1.2 rc3.
Considering the new animate ...
1
vote
1answer
342 views
AngularJS animation initially does not work, but after first click all is good
I have 2 forms, after loading the page, the 1st is shown and the other is hidden. When I first click Add-button, my animation that reveals the 2nd form does not work. But after the first click, I can ...
0
votes
0answers
127 views
Paginated slides in Angular
I have an array of items which I want to filter on different kinds of filters. Because I have more than 2000 items I want to paginate between pages so I've created a startFrom directive and used ...
