ng-animate

ngAnimate CSS animation not working with ng-show & ng-hide

由 こ雲淡風輕ζ 提交于 2019-12-07 15:39:57
问题 DEMO: http://plnkr.co/edit/cPDUWO?p=preview I have 2 checked checkboxes and 2 widgets displayed on the page. Clicking the checkboxes will use ng-show & ng-hide to hide and show the corresponding widget. Now I want to also have a basic fadeIn and fadeOut , however no luck so far :( The widgets that show/hide without any fade animation. Can you see where I'm going wrong? Controller animateApp.controller('mainController', function($scope) { $scope.pageClass = 'page-home'; $scope.widget_manage

Why is ng-class based ng-animate transition not working?

由 跟風遠走 提交于 2019-12-07 02:52:26
This is a heavily simplified demo of ng-class animation using transition that I'm trying to achieve. I'm trying to create a simple fade in animation when an item is selected. Selecting an item will add a selected class on it using ng-class directive. I'm trying to add a transition to it following the documentation with the animation hook classes added by ng-animate . Below is the code I have so far. It sets the opacity to 0 along with the transition property, and when the .selected-add-active class is added it is supposed to transition to opacity 1. But it does not work. angular.module('demo',

Unable to find a suitable version for angular with bower installation error for angular-animate module

由 感情迁移 提交于 2019-12-06 22:40:18
问题 I am using Angular 1.2.6 . I am trying to use bower to install angular-animate and ngAnimate-animate.css. I've tried installing ( bower install --save angular-animate ), uninstalling several time and diff code on github from 1.2.16 and 1.2.17. Bower keeps wanting to install the older version of angular-animate 1.2.16 compatible with Angular 2.1.12 . All of my passing karma unit tests fail after installing angular-animate as well. I keep on getting this error. Any ideas why? bower angular

ngAnimate CSS animation not working with ng-show & ng-hide

由 放肆的年华 提交于 2019-12-06 03:17:31
DEMO: http://plnkr.co/edit/cPDUWO?p=preview I have 2 checked checkboxes and 2 widgets displayed on the page. Clicking the checkboxes will use ng-show & ng-hide to hide and show the corresponding widget. Now I want to also have a basic fadeIn and fadeOut , however no luck so far :( The widgets that show/hide without any fade animation. Can you see where I'm going wrong? Controller animateApp.controller('mainController', function($scope) { $scope.pageClass = 'page-home'; $scope.widget_manage_quotes = true; $scope.widget_manage_customer = true; }); CSS .reveal-animation.ng-enter { -webkit

How to trigger an ng-move with angular-animate when reordering an array?

由 北城余情 提交于 2019-12-05 12:29:17
Using angular 1.2.4 I'm trying to figure out how to trigger ng-animate's move when a repeated item is reordered. I know the ng-animate is working because the animation for enter, leave, and move are all triggered when a filter is applied. However, when I use some array methods to reorder the array, no animations are triggered. I suspect part of the problem is that I am actually removing and adding elements to the array with this method, not really 'moving' them: $scope.moveDown = function(order){ var temp = $scope.names[order]; $scope.names.splice(order, 1); $scope.names.splice(order+1, 0,

AngularJS: swap two items in ng-repeater with animation

由 本小妞迷上赌 提交于 2019-12-05 11:48:39
I have a list of items, each has a unique id $scope.arr = [{val:0,id:'a'},{val:1,id:'b'},{val:2,id:'c'}]; Each item is absolute positioned according to their $index <div class="item" ng-repeat="item in arr track by item.id" ng-style="getAbsPos($index)" >{{item.id}}</div> All I wanted is swapping arr[0] and arr[2] in the array, and display a moving animation of this action. It turns out to be very difficult. I assume this css would work since the list is tracked by id .item{ transition:all 3000ms; } but somehow angular decides only moving one of items' dom and re-create the other one ( why?! ).

Unable to find a suitable version for angular with bower installation error for angular-animate module

由 家住魔仙堡 提交于 2019-12-05 03:16:10
I am using Angular 1.2.6 . I am trying to use bower to install angular-animate and ngAnimate-animate.css . I've tried installing ( bower install --save angular-animate ), uninstalling several time and diff code on github from 1.2.16 and 1.2.17. Bower keeps wanting to install the older version of angular-animate 1.2.16 compatible with Angular 2.1.12 . All of my passing karma unit tests fail after installing angular-animate as well. I keep on getting this error. Any ideas why? bower angular-animate#* cached git://github.com/angular/bower-angular-animate.git#1.2.16 bower angular-animate#*

during ng-animate of views, “leaving” view still takes up space while “entering” view is animating in

由 [亡魂溺海] 提交于 2019-12-05 02:28:10
I'm using AngularJS 1.1.5 and trying out the ng-animate directive with daneden's animate.css. I have a couple of views set up using routing. I'm using Twitter Bootstrap 3 RC1. Here is the code for the ng-view: <div class="container" ng-view ng-animate="{enter:'animated fadeInRightBig', leave:'animated fadeOutLeft'}"></div> And here is the routing part: $routeProvider .when('/', { templateUrl: '/Home/Home', title: 'Home' }) .when('/Home/Home', { templateUrl: '/Home/Home', title: 'Home' }) .when('/Home/About', { templateUrl: '/Home/About', title: 'About' }) .otherwise({ redirectTo: '/' });

Can't trigger animation on nested ngRepeat

由 浪子不回头ぞ 提交于 2019-12-04 08:42:49
问题 I can't figure out how to trigger animations on a nested ngRepeat with Angular. The CSS class ".test" is animated. When using ".test" on the inner ngRepeat it doesn't work (Plunker): <div ng-repeat="section in sections"> <div ng-repeat="item in section.items" class="test"> <h2>{{item.title}}</h2> </div> </div> When using ".test" on the outer ngRepeat it does work (Plunker): <div ng-repeat="section in sections"> <div ng-repeat="item in section.items" class="test"> <h2>{{item.title}}</h2> </div

ngAnimate stopped working in AngularJS 1.6.4

由 拜拜、爱过 提交于 2019-12-03 15:13:12
I've got a simple application with a simple css animation which works like a charm in AngularJS 1.2.2 + ngAnimate 1.2.2 : -> Runnable demo works like a charm. For (maybe) no reason the same codes doesn't work with AngularJS 1.6.4 + ngAnimate 1.6.4 : -> Broken animation demo The animation css classes were not added. There is no error in console. I can't figure out whats wrong here. Please note that $scope.pictures is dummy data. View <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script src=
订阅 ng-animate