ng-animate

sliding between route transition angularjs

巧了我就是萌 提交于 2019-12-20 09:59:11
问题 I've only been working with Angular for about a week, so I apologize if my code is crap. I'm attempting to create a sliding action between route transitions. I can create the effect in a slideshow but not between route transitions. Anyway code below: Nav <li><a ng-click="go('/')" class = "intro currentLink navLinks">Intro</a></li> <li><a ng-click="go('/why')" class = "why navLinks">Why</a></li> <li><a ng-click="go('/resume')" class = "resume navLinks">Res</a></li> <li><a ng-click="go('

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

安稳与你 提交于 2019-12-19 09:58:09
问题 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

How to use ng-animate in angular 1.2?

丶灬走出姿态 提交于 2019-12-18 03:53:37
问题 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

Installation of ngAnimate Module not working

北战南征 提交于 2019-12-13 16:13:22
问题 I can't seem to get ng-animate to work in an existing 1.2 application. I've followed the check list in the API, but it isn't applying the appropriate animate classes. I feel like I must be missing something silly in the installation process. Here's what I've done: 1 - I'm loading angular and angular-animate in the head of my document here: <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> <!-- load angular --> <script src="//ajax.googleapis.com/ajax/libs

How to trigger a controller function after an Animation in Angular JS

限于喜欢 提交于 2019-12-13 04:39:32
问题 I have come to a standstill in terms on threading together a sequence of Animations and then a controller action. What I basically want to do is basically 1. click on a button/div, 2.Trigger an Animation, 3. Once animation is complete run a function in a controller that resets the button/div I have completed steps 1 & 2 and just need to get the last bit done. Here is the Button <button ng-class="{'clicked':clicked, 'correct' : answer.answer == 'correct' }" ng-click="clicked = true" ng-repeat=

ngRoute no longer working after injecting ngAnimate

元气小坏坏 提交于 2019-12-13 01:19:38
问题 I wanted to animate my application so I injected ngAnimate but now none of my views are displaying: var spApp = angular.module('spApp', ['ngRoute','ui.bootstrap', 'ngAnimate']) .config(function($routeProvider, $locationProvider){ var rootUrl = '/Style%20Library/projects/spDash/app/partials/'; $routeProvider .when('/home', { templateUrl: rootUrl+'home.html' }) .when('/userView', { templateUrl: rootUrl+'userView.html', controller: 'userCtrl' }) .when('/groupView', { templateUrl: rootUrl+

Javascript toggle animation of height in Angular

白昼怎懂夜的黑 提交于 2019-12-12 04:05:49
问题 I have the following animation defined in my Angular app for toggling the hight/opacity of an element. It works as expected, however I'm now using it to toggle a 'main menu' and the 'sub-menus' within. When the main menu is opened it increases from 0 to X height, then if I open a sub menu the main menu remains at X height, whereas I'd like it to expand to the height of the main menu + height of the newly opened sub-menu. app.animation('.slide_toggle', ['$animateCss', function ($animateCss) {

Using ng-animate with animate.css

孤街浪徒 提交于 2019-12-12 03:25:07
问题 I'm trying to understand and use ngAnimate. I'm using angular-animate.js, animate.css and angular 1.3. Right now, I've add on my app conf ngAnimate to activate it and I've add to my css something like that : .ng-leave{ -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; } It's working because, fadeInUp is declare in animate.css. So, now I would like to do the same thing without writing css (by juste using animate.css) I've

Angular2 animation learning resources [closed]

喜夏-厌秋 提交于 2019-12-12 03:24:38
问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 3 years ago . Are there any good / in depth resources available for learning animation in Angular2 apart from the basic API reference on www.angular.io ? 回答1: Animation in Angular 2 has changed many times during development, and is changing again in RC2. Here is a resource that I used for an app using RC1, though the

unit testing fading out directive - cannot see the right CSS class added -angular & jasmine

旧街凉风 提交于 2019-12-12 02:53:35
问题 i'm trying to test the very simple directive i have made. .directive('cssnotification', [ '$timeout', function($timeout) { return { restrict:'A', link:function(scope, element, attrs) { scope.$watch('success',function(newVal ,oldVal){ if(newVal){ $timeout(function(){ scope.success = false; },1000); } },true) } } }]) This directive makes some element to be visible for 1 second and after that - fades it out. (here is the fiddle that demonstrates the problem) I know that for perform the fadingOut