AngularJS ng-show with ng-animate unexpected behavior - javascript

The problem is that when I double click very quickly on a button to toggle an ng-show, the value will not change (this is expected behavior - it toggles) but the actual element will be hidden. See here: http://jsfiddle.net/QbZrJ/
If you double click quickly, the value stays true, but the element fades out. If the ng-animate directive is removed, it works as expected, so I guess this has to do with the animation.
function ctrl($scope){
$scope.foo = true;
$scope.clicked = function(){
$scope.foo = !($scope.foo);
}
}
Nothing fishy there. Note that this is using the old way of animating in AngularJS but I observe the behavior in AngularJS 1.2.8 as well.
Edit: I think the animation duration is the issue after some troubleshooting. It seems that with 0 delay it works fine. With anything nonzero, it somehow ignores the fact that it should be hidden and completes the animation.

I see that you still use AngularJS 1.1.4.
Since 1.2, AngularJS uses a completely different API for animations.
Be aware that ng-animate is a separate module now, so you must include it in your scripts and also in your module dependencies list.
You can read more about it this article: Remastered Animation in AngularJS 1.2
Refactored to AngularJS 1.2 -> plunker
html:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-animate.min.js">
<div ng-app="myApp">
<div ng-controller='ctrl'>
<div ng-click='clicked()'>[Double Click Me Fast] ng-show:{{foo}}</div>
<div ng-show="foo" class='myDiv'>
</div>
</div>
</div>
js:
angular.module('myApp',['ngAnimate'])
.controller('ctrl', function ($scope){
$scope.foo = true;
$scope.clicked = function(){
$scope.foo = !($scope.foo);
}
});
css:
.myDiv{
width:400px;
height:200px;
background-color:red;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
transition: opacity 1s linear;
opacity: 1;
}
.myDiv.ng-hide-add, .myDiv.ng-hide-remove{
display:block!important;
}
.myDiv.ng-hide{
opacity: 0;
}

Related

bootstrap/jQuery fade opacity transition not working

I am hoping someone can help!
I am trying to add bootstrap support to an existing jQuery/CSS site. Aside from realizing bootstrap changes a bunch of formatting that I have to fix - it seems to be affecting a popup transition I have, and can't seem to figure out. I hope you can help, thanks!
With regular jQuery/CSS (not UI), I am creating a modal dialog box that I popup.
BEFORE bootstrap - it would "fade" in the popup box (i.e., the opacity/alpha). However, AFTER adding the bootstrap .css/.js - now it just
makes the background grey and totally opaque.
How do I fix it?
This is the code that works with just css/jQuery
<div class=sample-dialog>
<div class=modal-overlay>
<div class=modal-content>
<div class=modal-body>
random content
</div>
</div>
</div>
</div>
then the jQuery popup code that I call
function showModal() {
var m = $('.sample-dialog');
var o = m.find('.modal-overlay');
var c = m.find('.modal-content');
var b = c.find('.modal-body');
m.css('display','block');
o.animate({'opacity':.8},350);
b.animate({'opacity':1,'margin-top':0},350,function() {
c.css('overflow-y','auto');
});
}
This "works" with just the jQuery/css.
HOWEVER, as soon as I add the bootstrap .js/.css file in my header, the exact same transition now shows no opacity (just a grayed out background).
Any idea on how to fix?
As a second thing - I also notice with the bootstrap files added, the transition seems to be 'choppy' as opposed to the nice 'smooth' one I had. If you have insight for that too, that would be great!
Thanks very much!
It may be that the rules of bootstrap transitions are creating conflict, I remember working with version 4.0.0-alpha.6 it was impossible to modify the transition of the height in a model.
These would be the default values ​​of the modal transition (
with the .fade class)
_transitions.scss
.fade.show {
opacity: 1;
}
.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
transition-property: opacity;
transition-duration: 0.15s;
transition-timing-function: linear;
transition-delay: initial;
}
This I think could help you;
Enables predefined transitions on various components
$enable-transitions: true (default) or false
Documentation bootstrap#4.0.0-alpha.6 /Customizing variables
Sorry if the bootstrap version does not help, but it's the only version I've worked with.

Angular ngAnimate list items automatically fade out

I have a weird issue with ngAnimate in a simple application I'm doing with the MEAN Stack.
Both angular.js and angular-animate.js are 1.4.7 version.
I have an ul that looks something like this:
<ul>
<li ng-repeat="item in items" class="fade">
{{item.name}}
</li>
</ul>
In the controller I'm getting the items array with an $http.get() call to the MongoDB.
This is the CSS code for the simple animation:
.fade {
transition: 1s linear all;
-webkit-transition: 1s linear all;
}
.fade.ng-enter {
opacity: 0;
}
.fade.ng-enter.ng-enter-active {
opacity: 1;
}
If for example I refresh the page,the controller gets the items array from the Database, and the list items fade in, but they fade out right after the fade in effect.
What is causing this undesired fade effect back to opacity:0 ? Could it be the way the functions I'm using the get the data interact with the view?
It turns out it was a default Bootstrap.css class called '.fade', which has opacity:0 rule;
Overriding that class in my style.css solved the undesired fade out. I hope it helps.

Transitioning between pageloads

I want to have transition effects between pageloads like slide, rotate, fade, etc. I'm trying to accomplish this with the following code, but it's not working. Any ideas?
$("asp:HyperLink.smoothlink").click(function (e) {
$("body").addclass("fadeout");
setTimeOut(function() {
window.location = e.currentTarget.attributes['data-url'].value;
},1000);
}
CSS
.fadeout
{
opacity:0;
transition :opacity 1s ease-in-out;
-moz-transition-opacity 1s ease-in-out;
-webkit-transition:opacity 1s ease-in-out;
}
As far as I understand you are trying add an animation to your current page when you click on a specific link. It seems that you are working in a .NET environment and I'm not too familiar with its WebControls, however couple of errors stand out:
You are not using proper selector string - asp:HyperLink.smoothlink. Try using a.smoothlink instead.
JavaScript is case-sensitive so addclass and 'setTimeOutare causing an error. Try using 'addClass and setTimeout instead.
You also might need to use the href attribute instead data-url, but that really depends on what is the .Net control generating.
Here is a working example of what i think you are trying to do:
HTML:
example link
CSS:
.fadeout {
opacity:0;
transition :opacity 1s ease-in-out;
-moz-transition-opacity 1s ease-in-out;
-webkit-transition:opacity 1s ease-in-out;
}
JavaScript:
$(document).ready(function () {
$("a.smoothlink").click(function (event) {
event.stopPropagation();
$("body").addClass("fadeout");
setTimeout(function () {
window.location = $(event.currentTarget).attr('href');
}, 1000);
});
});

Only the first element in ngRepeat is animated

If I load async data in my app. NgRepeat only animates the first element in an array.
jsFiddle
html:
<div ng-repeat="x in data"></div>
css:
.box.ng-enter {
-webkit-transition: all 2s ease;
transition: all 2s ease;
opacity: 0;
top: 20px;
}
.box.ng-enter-stagger {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.box.ng-enter.ng-enter-active {
opacity: 1;
top: 0;
}
In this example I use $timeout to simulate an async datasource.
Why is that.
Thanks!
My guess is this was a bug that has since been fixed. There have been a large number of changes to the animate module since the 1.2.* release.
Here is a JsFiddle that has the latest source from git for the animate module embedded and the issue has gone away. If you need this functionality then it is probably best for you to load in your own version of the animate module using the latest source.
Here you can compare the 1.2.* branch to the master branch look for "src/ngAnimate/animate.js" to see all the changes to the module.
Ignore - needed to get the fiddle link to work i get the motivation
behind requiring code along with a fiddle but in this case it actually makes
little sense the only modification made to the original was the addition of
1600 lines of code taken from the latest version of the module. I'm not
putting that in here.

Animations in AngularJS 1.2 - How To

I tried to use animations within my app but unfortunately to no avail. I checked lots of examples, blog, downloaded animate.css etc etc.
I injected animation module, tried basic examples, tried following tutorials for instance, but it seems I miss something every time.
Can someone please provide exact instructions for AngularJS v1.2 animations to work, with injections, inclusions and everything you need to do to get them working? Maybe a step-by-step instructions on how you usually do your animations.
A basic fadein/fadeout example on ng-show/hide would suffice.
Thank you very much
Reference angular-animate.js
Add ngAnimate as a dependent module:
myApp = angular.module('myApp', ['ngAnimate']);
Add a div to your view with the ng-show directive and for example the two classes 'fadein' and 'fadeout':
<div class="fadein fadeout" ng-show="show">I am the div.</div>
Add the classes to your css. In 1.2 ngAnimate is class-based and you need to add certain suffixes to your classes based on a certain naming convention. A good source of information regarding this can be found here.
Example:
/* Fade in ngShow */
.fadein.ng-hide-remove {
-webkit-transition: 1s;
transition: 1s;
display: block !important;
opacity: 0;
}
.fadein.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
/* Fade out ngShow */
.fadeout.ng-hide-add {
-webkit-transition: 1s;
transition: 1s;
display: block !important;
opacity: 1;
}
.fadeout.ng-hide-add.ng-hide-add-active {
opacity: 0;
}
Add logic to change the expression that is provided to the ng-show directive and the div should fade in and out.
A working example: http://plnkr.co/edit/lq4LmUq5mrbJBGMMEyh9?p=preview

Categories

Resources