I was playing around with recently added angular.js animations feature, and this doesn't work as desired
<style>
.myDiv{
width:400px;
height:200px;
background-color:red;
}
.fadeIn-setup,.fadeOut-setup {
-webkit-transition: 1s linear opacity;
-moz-transition: 1s linear opacity;
-o-transition: 1s linear opacity;
transition: 1s linear opacity;
}
.fadeIn-setup{
opacity:0;
}
.fadeOut-setup{
opacity:1;
}
.fadeIn-setup.fadeIn-start {
opacity: 1;
}
.fadeOut-setup.fadeOut-start{
opacity:0;
}
</style>
<div ng-app>
<div ng-controller='ctrl'>
<input type='button' value='click' ng-click='clicked()' />
<div ng-show="foo == true" class='myDiv' ng-animate="{show: 'fadeIn', hide:'fadeOut'}">
</div>
</div>
</div>
function ctrl($scope){
$scope.foo = false;
$scope.clicked = function(){
$scope.foo = !($scope.foo);
}
}
http://jsfiddle.net/Kx4TS/1
it spoils away myDiv on the dom.ready
and starts it fading out. Whereas it initially should be hidden. How to fix that?
This has been fixed now. Upgrade to 1.1.5.
This issue still persists even now with 1.2.22. However, one of these solutions solves it very easily.
After trying all the solutions mentioned here I wanted to specifically highlight cocoggu's suggestion to ac360 as it is by far the most concise and it "just works".
As he suggests, simply adding the ng-hide class to the offending element resolves the problem immediately. - It prevents the initial animation glitch and allows all subsequent animations to behave as expected.
Working Solution thanks to cocoggu
<div id="offending-element" class="ng-hide"></div>
I have found 2 different solutions for your problem
The easiest solution:
Add a inline style to the div style="display:none"
The other solution is to add an initial class to the div with ng-class="state"
and reset the class when the button is clicked
function ctrl($scope){
$scope.state = 'hide';
$scope.foo = false;
$scope.clicked = function() {
$scope.state = undefined;
$scope.foo = !($scope.foo);
}
}
together with the following css:
.hide {
display: none;
}
I think I would use the first and most simple solution
this should do the trick:
<div ng-class="ng-hide" ng-show="foo == true" class='myDiv'">
this is the important part here: ng-class="ng-hide"
EDIT:
As pointed out in the comments, the above would not work. It should look like this:
<div class="ng-hide" ng-show="foo == true" class='myDiv'">