CODEWITHSUNDEEP
angularjsng-animate
TkNeo
TkNeo

Reputation: 523

div not showing during animation using nganimate

I am trying to make my div2 show up similar to SlideUp-Click to Toggle button here.

My code shows its not working. The buttons "open second div" and "hide this div" are meant to show/hide the second div. The show/hide does work but the animation does not. Please help.

    var myElement = angular.element( document.querySelector('#div2') );
    myElement.addClass('ng-hide');

    $scope.openSecondDiv = function() {
        var myElement = angular.element( document.querySelector('#div2') );
        myElement.removeClass('ng-hide');
    }
    $scope.hideSecondDiv = function() {
        var myElement = angular.element( document.querySelector('#div2') );
        myElement.addClass('ng-hide');
    }

Upvotes: 0

Views: 85

Answers (3)

Shane
Shane

Reputation: 564

It's because you're trying to transition to height: 0, which you can't do.

Changing height to max-height solves the issue with your code as seen in the updated plunkr: http://plnkr.co/edit/O4rT2bSsr3KnufQMYuhx?p=preview

But as others have said, you should not be doing it this way. You should just be toggling classes with Angular and not .addClass.

Upvotes: 1

J_P
J_P

Reputation: 641

You don't have to do such complex for that . I have implemented using simple css transition and ng-class .

You can check this plunker

My css implementation:

div {
    white-space: pre;
    background: #eee;
    color: #333;
    overflow:hidden;
    height:0;
    opacity:0;
    transition:height 1s, opacity 1s;
    -moz-transition:height 1s opacity 1s;
    -webkit-transition:height 1s opacity 1s;
    -o-transition:height 1s opacity 1s;
    -ms-transition:height 1s opacity 1s;
}
.changed {
    height:200px;
    opacity: 1;
}

My html implementation 

<button class="btn" ng-click="hideSecondDiv()">Hide this div</button>
<div ng-class="{changed:clicked === true}" id="div2">

</div>

Hope this will work for you .

Upvotes: 0

Brad Rem
Brad Rem

Reputation: 6026

Instead of all the controller logic, what about using ng-show directly as an attribute:

<div class="row teal" id="div1">
    <button class="btn" ng-click="showDiv2 = !showDiv2">Open second div</button>
</div>

<div style="background: orange;" class="row cssSlideUp" ng-show='showDiv2'>
    <button class="btn" ng-click="showDiv2 = false">Hide this div</button>
</div>

For the ng-clicks, the first is an example of toggling and the other forces it to false.

Upvotes: 1

Related Questions