ng-animate

ng-animate : conditionally switching “back” transition (BUG?)

由 亡梦爱人 提交于 2019-12-01 08:54:19
Hi everyone, reading through this google group and the fiddles and blogpost linked from there, I managed to get page transitions working with ng-animate. Here's my Fiddle the fiddle is nicely commented, please let me know if anything's unclear By setting a 'transitionClass' (either .LR or .RL) on the ng-view I was able to trigger different css-transitions for every view change. Now, what I want to do, is manually applying a "back" transition in case of changing the view one step back, no matter whether that step back is caused by a link within the app or the browser's back button. To do so,

Ng-animate stopped working using $templateRequest decorator

由 谁说我不能喝 提交于 2019-12-01 06:23:37
I was trying to avoid template errors with angular js when my user became unauthenticated. To do this, I came to this stackoverflow solution . It worked for me, but now I noticed that my ng-animate stopped working without throwing console errors. What am I missing? Update: This is the code used var app = angular.module('app',[]); app.config(['$provide', function($provide) { $provide.decorator('$templateRequest', ['$delegate', function($delegate) { var mySilentProvider = function(tpl, ignoreRequestError) { return $delegate(tpl, true); } return mySilentProvider; }]); }]); The function

Ng-animate stopped working using $templateRequest decorator

由 廉价感情. 提交于 2019-12-01 03:04:11
问题 I was trying to avoid template errors with angular js when my user became unauthenticated. To do this, I came to this stackoverflow solution. It worked for me, but now I noticed that my ng-animate stopped working without throwing console errors. What am I missing? Update: This is the code used var app = angular.module('app',[]); app.config(['$provide', function($provide) { $provide.decorator('$templateRequest', ['$delegate', function($delegate) { var mySilentProvider = function(tpl,

Angular 2 Animate - No visible effect of the '* => void' transition when changing routes/components

由 隐身守侯 提交于 2019-11-30 20:16:59
Using the Angular 2 Animate (RC2), with the help of official Docs, and the code used by Matias in the month old ng-conf animate video on YT channel. I got everything working except the most crucial part: I cannot seem to get the leaving transition/animation going when changing routerlinks/components. Using the '* => void' does not do anything. The router destroys the components in view without any regard to the animate leaving transition and introduces the new routerlink/component. I get the entering animations to work, but not the leaving one. I presume that router is not automatically

Angularjs ng-animate + css transition for sliding effect

由 ▼魔方 西西 提交于 2019-11-30 14:19:01
I'm trying to achieve sliding effect with the new ng-animate feature of Angular. I've taken some code from the demo site and have prepared a fiddle . The problem is that elements below the sliding DIV keeps shifting up and down when the item is being swapped from the array. I tried with line-height but no success. Is it possible to fix the above behavior? or any better way to achieve it only with angular and CSS? You can wrap the input and the button in a div and also put it in the absolute position. Here is a demo HTML <div ng-app=""> <div ng-controller='anim' > <div ng-repeat="item in lst"

How can I animate the movement of remaining ng-repeat items when one is removed?

由 旧巷老猫 提交于 2019-11-30 11:38:57
I have a dynamic list of items using ng-repeat. When something happens an item may disappear. I have handled smoothly animating the removal of these items using ng-animate, but after they are gone, the remaining items simply snap to their new position. How can I animate this movement smoothly? I've tried applying an "all" transition to the repeated class and using ng-move with no success. You can achieve this by animating the max-height property. Check out this sample: http://jsfiddle.net/k4sR3/8/ You will need to pick a sufficiently high value for max-height (in my sample, I used 90px). When

Slide Left animated transition in ng-hide, ng-Animate

由 [亡魂溺海] 提交于 2019-11-30 06:57:32
I have created jsfiddle http://jsfiddle.net/99vtukjk/ On clicking left or right text, currently the animation for hide is upwards, how can we change it to slide left animation e.g slide & fade to left menubar?. <body ng-app="myApp1"> <div id='outerdiv' ng-controller="MyCtrl" > <div ng-click="myValue=true" >LEFT</div> <div ng-click="myValue=false">RIGHT</div> <div id="one" class='animate-hide' ng-hide="myValue"> this is just a sample div </div> {{myValue}} </div> </body> CSS: .animate-hide { -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s; -moz-transition:all cubic-bezier(0

Angular 2 Animate - No visible effect of the '* => void' transition when changing routes/components

由 倾然丶 夕夏残阳落幕 提交于 2019-11-30 03:45:33
问题 Using the Angular 2 Animate (RC2), with the help of official Docs, and the code used by Matias in the month old ng-conf animate video on YT channel. I got everything working except the most crucial part: I cannot seem to get the leaving transition/animation going when changing routerlinks/components. Using the '* => void' does not do anything. The router destroys the components in view without any regard to the animate leaving transition and introduces the new routerlink/component. I get the

Slide Left animated transition in ng-hide, ng-Animate

由 隐身守侯 提交于 2019-11-29 08:05:40
问题 I have created jsfiddle http://jsfiddle.net/99vtukjk/ On clicking left or right text, currently the animation for hide is upwards, how can we change it to slide left animation e.g slide & fade to left menubar?. <body ng-app="myApp1"> <div id='outerdiv' ng-controller="MyCtrl" > <div ng-click="myValue=true" >LEFT</div> <div ng-click="myValue=false">RIGHT</div> <div id="one" class='animate-hide' ng-hide="myValue"> this is just a sample div </div> {{myValue}} </div> </body> CSS: .animate-hide {

How to use ng-animate in angular 1.2?

由 萝らか妹 提交于 2019-11-29 03:06:00
Base angular 1.1.5 - http://plnkr.co/edit/eoKt8o4MJw9sWdYdeG3s?p=preview - WORKS Upped angular 1.2.6 - http://plnkr.co/edit/WopgAtFNVm1mKf5Li99h?p=preview - FAIL I think I did follow the instructions from the docs - http://docs.angularjs.org/api/ngAnimate • First include angular-animate.js in your HTML • Then load the module in your application by adding it as a dependent module It's quite late in my timezone and I probably miss something obvious. My guess would be - CSS file between 1.1.5 and 1.2.6 is not compatible? Cannot really tell... Anyway here is the code form upped plunker, I included
订阅 ng-animate