In my project, thanks to animate.css, I can have entry animations like this:
<div class="row animated fadeInDown" ng-show="someCondition">
This is great. When someCondition is true, the div appears with an animation. What I don't understand is how to cause the reverse to happen. Say, in my controller I set someCondition = false;. What should I do in the markup to make the div do a fadeOutUp?
I tried putting the fade out in the class="" attribute, but that just conflicts with the fade in. I also tried ng-class={} but I don't know what condition is true when something is being removed.
Try a conditional ng-class:
<div ng-class="someCondition && 'fadeInDown' || 'fadeOutUp'">
UPDATE:
Use a variable class name in your markup:
<div ng-class="someClass">
and add a watch to the controller to apply the proper class name:
$scope.$watch('someCondition', function(newval, oldval){
if($scope.someCondition){
$scope.someClass = 'fadeInDown';
} else {
$scope.someClass = 'fadeOutUp';
}
});
In the following fiddle I added a setInterval to simulate the condition change:
http://jsfiddle.net/F52y5/59/
Related
I wan't to get a slideIn / slideOut animation by toggling the classes slideInRight and slideOutRight to a ul element.
I've tried it in different ways but I it only works with one className.
How can I add the class slideInRight on the first, and the class slideOutRight on the second click on my ul element with the class dropdown-menu?
I've tried it this way:
angular.element('.dropdown-toggle').on('click', function(){
angular.element('ul.dropdown-menu').toggleClass('slideOutRight slideInRight');
});
What am I doing wrong?
Hope you can help.
UPDATE:
Here is a Plunker of the current state of my code. This way only the slideInRight animation works. If I click the button again, the ul disappears without the slideOutRight animation.
What's wrong?
You may want to try using angular's ng-class?
I'm sort of new to angular, but the way I did it was like this:
<ul class="dropdown-menu" ng-class="ulOpen ? 'slideOutRight' : 'slideInRight'">
and the js
angular.element('.dropdown-toggle').on('click', function(){
if($(this).hasClass('.slideOutRight')) {
ulOpen = true;
} else {
ulOpen = false;
}
});
Add ulOpen to your controller as a scope variable
Controller
$scope.ulOpen = false;
HTML
Then you should rely on the angularjs directive ng-click to set the value of ulOpen:
<button class="dropdown-toggle" type="button" ng-click="ulOpen=!ulOpen">Toggle Class</button>
And ng-class to switch class based on the value of ulOpen:
<ul class="dropdown-menu" ng-class="slideOutRight: ulOpen, slideInRight: !ulOpen">
In general, I would recommend whenever possible you find the pure angularjs solution. I find very few cases where there isn't a native angular directive that can handle what I would otherwise attempt to do in jquery.
I want my ng-class to update when the variable in my controller changes. For some reason, it is only triggered on the page load and whilst the variable change, the ng-class does not update to reflect this.
Here is the code that triggers the variable change:
<a class="cs-mobile-menu__close-icon" ng-click="switchMobileMenu('right')">
</a>
Here is the code which I want to change depending on the variable:
<div class="right-menu__user"
ng-class="{
'animate': true,
'animate--leave': !isRightMenuOpen}">
{{user.firstName}} {{user.lastName}}
</div>
Here is the corresponding code from the controller:
$rootScope.isLeftMenuOpen = false;
$rootScope.isRightMenuOpen = false;
$scope.switchMobileMenu = function(direction) {
if (direction === 'left') {
$scope.isLeftMenuOpen = !($scope.isLeftMenuOpen);
} else {
$scope.isRightMenuOpen = !($scope.isRightMenuOpen);
}
};
It seems that ng-class is only set on the initial ng-click. I believe I need to wrap the above function in a $scope.apply() function so that the ng-class watches for changes and applies them as the ng-click toggles the variable. Am I on the right track? If so, how would I do this?
You don't need $scope.$apply. Working example: https://jsbin.com/fogasiniku/edit?html,js,output
Do you really have double dashes in the CSS class name?
I have layout where I have:
<li ng-click="GetLoader();">ACCOUNT</li>
<li ng-click="GetLoader();">SETTINGS</li>
On the index page, I have a menu and ng-view where I can change pages on a click
Also included on the index page is a spinner.
<div class="loading" ng-show="ticketloading" ng-init="GetLoader()">
<div>
<img class="spinner" ng-src="~/Images/ajax-loader.gif" />
</div>
</div>
In my script I have -
$scope.GetLoader = function() {
$scope.ticketloading = true;
loader.css("z-index", "1");
}
My problem is that when a user clicks on "Account" it gets loaded, but just for few milliseconds. Then it changes to all blank. I receive data from ng-view. My question is how can I delay showing ng-view to show the loader a little bit longer.
Thanx in advance!
First of all you should avoid using DOM manipulations in controller. In your case it's better to use declarative ngClass directive to set opacity.
Then your actual issue is that you don't want to use static setTimeout to hide loaded, but rather listen $routeChangeSuccess:
$rootScope.$on('$routeChangeSuccess', function() {
$rootScope.ticketloading = false;
});
and use this loading flag in template like you are currently doing.
You can put above event listener in run block for example.
You can add property in your controller, for example dataLoading and add ng-if attribute to ng-view like this:
layout
<div ng-view ng-if="!dataLoading">
controller
function loadData()
{
var self = this;
self.dataLoading = true;
dataService.loadData(params, function(){
...
self.dataLoading = false;
});
}
My Web page has the following tag:
<div data-ng-model="modal.data.message"></div>
Is there a simple way using that I can make a message "autosaving" fade into view in the <div> and then fade out a couple of seconds after the function returns.
Add the ngShow directive to your div:
<div ng-model="message" ng-show="showMessage" class="message fadein fadeout">{{message}}</div>
When saving begins set showMessage = true and the message you want to display. When saving is done set showMessage = false. To show the message a while longer after the saving is done you can use $timeout:
// Loadind done here - Show message for 3 more seconds.
$timeout(function() {
$scope.showMessage = false;
}, 3000);
The animation part depends on what version of AngularJS you are using.
Here is an example using 1.2: http://plnkr.co/edit/jBukeP?p=preview
Had this working earlier, now it doesnt respond accordingly.
In my html:
<div ng-click="setFalse();" ng-show"emptyspotslist">No results</div>
Controller:
$scope.setFalse = function () {
$scope.emptyspotslist = !$scope.emptyspotslist;
console.log($scope.emptyspotslist);
}
Default value of $scope.emptyspotslist = true.
The DIV doesnt hide, after clicking. Function gets called though.
Probably something really simple i'm overlooking.
You should have a = after ng-show attribute
Old
<div ng-click="setFalse();" ng-show"emptyspotslist">No results</div>
New
<div ng-click="setFalse();" ng-show="emptyspotslist">No results</div>
Your HTML is malformed...
ng-show="emptyspotslist"
You're missing an equals =.