ng-animate

Custom Animations with ng-animate $animate

由 非 Y 不嫁゛ 提交于 2019-12-24 05:30:57
问题 I need some help on better understanding custom animations in AngularJS 1.3. The objective Click on an element Animate separate element on the DOM I have created the following plunkr with no success http://plnkr.co/edit/zg3BglCY9VfgPJc2pfNg?p=preview <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"><

AngularJS: swap two items in ng-repeater with animation

由 半世苍凉 提交于 2019-12-22 08:26:08
问题 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

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

由 不打扰是莪最后的温柔 提交于 2019-12-22 08:17:31
问题 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

Dynamically create Angular animations

由 ε祈祈猫儿з 提交于 2019-12-22 06:48:46
问题 I am creating a paging component that slides to next or previous fullscreen page. Because issues with different browsers and devices I have abandoned just using CSS transitions for now. I have a working angular animate solution but the new problem is that it doesn't scale. import { Component } from '@angular/core'; import { animate, state, style, transition, trigger } from '@angular/animations'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app

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

由 喜你入骨 提交于 2019-12-22 04:13:13
问题 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' })

Angularjs - animating children of repeated elements

由 ╄→尐↘猪︶ㄣ 提交于 2019-12-22 04:01:40
问题 Friends, I'm banging my head about this issue, I was hoping you can help me. I'm trying to animate the child of a repeated element with angularjs 1.2rc1 (perhaps this has changed?), more or less like this: <div ng-repeat="row in rows" class="animated-row> <div class="animated-child">Row content</div> </div> What I want is to animate the child to move inside the repeated row on enter and leave. Therefore, I have tried, as per the documentation, a selector like this: .animated-row { overflow:

ngAnimate stopped working in AngularJS 1.6.4

由 做~自己de王妃 提交于 2019-12-21 04:26:11
问题 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

Animating ng-move in AngularJS ngRepeat is animating the wrong items

由 别说谁变了你拦得住时间么 提交于 2019-12-21 04:02:22
问题 I'm a little flummoxed when it comes to animating ng-move in an ng-repeat. If I move an array item from 3 to 7 for instance, items 4-7 get shifted up and they animate. However the actual item I moved from 3 and placed in position 7, does not. Here's a plunkr demonstrating my issue. http://plnkr.co/edit/4yRkLWbsU57YxrYOrWUQ?p=preview Moving item 7 to 3, however, works as I expect, animating the single moved item, and not the items that have been pushed down. This is not very useful for showing

AngularJS: with ng-animate & ng-view, how to make a 3D cube rotation effect?

由 泄露秘密 提交于 2019-12-21 03:57:18
问题 I'm trying to get a 3D cube effect animation with ng-animate and ng-view. When I switch to another page, I would like to feel like I’m rotating on a cube. When I click on "Go Page 2", the actual "Page 1" would leave and rotate to the left and the "Page 2" would arrive from the right. I’ve got something approaching but with really dirty CSS transitions and when I switch pages, they are not "stick" together. Code sample: http://jsfiddle.net/bnyJ6/ I've tried like this: HTML : <style ng-bind

AngularJS animation card flip

由 淺唱寂寞╮ 提交于 2019-12-20 18:00:34
问题 I am trying to use the new AngularJS way of doing animations between page transitions and would like to incorporate a card flip (like http://jsfiddle.net/nicooprat/GDdtS/) body { background: #ccc; } .flip { -webkit-perspective: 800; width: 400px; height: 200px; position: relative; margin: 50px auto; } .flip .card.flipped { -webkit-transform: rotatex(-180deg); } .flip .card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; } .flip .card .face { width:
订阅 ng-animate