angular ng-class appending classes does not trigger css3 transition

Question

I have created custom modal directive in angular but it seems transition is not working and i can't figure out why. Inside my directive isolated scope i have method toggleModal() which is switching modalState to true / false. So everything is basically working except animation

HTML:

<span class="glyphicon glyphicon-edit" ng-click="toggleModal()"></span>
<div class="annotation-panel"
     ng-class="{'annotation-panel-active' : modalState == true, 'annotation-panel-inactive' : modalState == false}">
    <div class="annotation-modal" ng-class="{'active':modalState == true, 'inactive':modalState == false}">

        <button type="button" class="btn btn-default" ng-click="toggleModal()">Close</button>
    </div>
</div>

CSS:

.annotation-panel{
  display: none;
  position: fixed;
  top:0;
  left:0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
}
.annotation-panel-active{
  display: block!important;

}
.annotation-panel-inactive{
  display: none!important;
}
.annotation-modal{
  position: fixed;
  z-index: 1001;
  left:10vw;
  top: 0;
  width: 80vw;
  height: auto;
  overflow-y: scroll;
  opacity: 0;
  background-color: whitesmoke;
  transition: all 0.5s linear;
}
.annotation-modal.active{
  top: 10vh;
  opacity: 1;
}
.annotation-modal.inactive{
  top: 0;
  opacity: 0;
}

So basically using ng-class im switching between two classes

.active and .inactive but it seems transition does not animate the change in the classes, i think i have some general mistake but can't find it. I don't use ngAnimate because i'm making module so i don't a lot of dependencies and that's why i'm making it custom with classes

yscik · Answer 1 · 2016-09-28T12:37:18.957

You are hiding the annotation-panel with display:none instantly when the state changes to inactive, so the contained annotation-modal wont be visible.

The use of ng-animate here would be to only apply ng-hide (and thus, display:none) when the animation has finished.

Without that, you need to use a different method to hide the panel after the animation has finished. Here is one solution with moving the panel offscreen. Notice how the transition-delay in inactive state matches the animation length of the modal fadeout. Also, by only having the transition on the inactive state, when the panel becomes active, it moves instantly to the viewport.

.annotation-panel{
  position: fixed;
  top: -2000px;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
}
.annotation-panel-active{
  top: 0;

}
.annotation-panel-inactive{
  transition-property: top;
  transition-delay: 0.5s;
  transition-duration: 0s;
}

.annotation-panel{
  position: fixed;
  top: -2000px;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
}
.annotation-panel-active{
  top: 0;

}
.annotation-panel-inactive{
  transition-property: top;
  transition-delay: 0.5s;
  transition-duration: 0s;
}
.annotation-modal{
  position: fixed;
  z-index: 1001;
  left:10vw;
  top: 0;
  width: 80vw;
  height: auto;
  overflow-y: scroll;
  opacity: 0;
  background-color: whitesmoke;
  transition: all 0.5s linear;
}
.annotation-modal.active{
  top: 10vh;
  opacity: 1;
}
.annotation-modal.inactive{
  top: 0;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<span class="glyphicon glyphicon-edit" ng-click="modalState =!modalState">click</span>
<div class="annotation-panel"
     ng-class="{'annotation-panel-active' : modalState == true, 'annotation-panel-inactive' : modalState == false}">
    <div class="annotation-modal" ng-class="{'active':modalState == true, 'inactive':modalState == false}"> helloo

        <button type="button" class="btn btn-default" ng-click="modalState = false">Close</button>
    </div>
</div>
</div>

so i got my mistake but to make it work ill need ngAnimate with which ill use ng-hide for the annotation-panel ? — Georgi Antonov, Sep 28 '16 at 12:22
I know it works but some elements inside annotation-modal cant be clicked I have editor inside with my solutions editor is ok but when using your solution some things gets bugged — Georgi Antonov, Sep 28 '16 at 13:10

score 0 · Answer 2 · answered Sep 28 '16 at 11:58

You should go for ng-hide if you just have to make display none for the element

here are some animation css for that

//
//a working example can be found at the bottom of this page
//
.my-element.ng-hide-add, .my-element.ng-hide-remove {
 /* this is required as of 1.3x to properly
    apply all styling in a show/hide animation */
    transition: 0s linear all;
 }

 .my-element.ng-hide-add-active,
 .my-element.ng-hide-remove-active {
    /* the transition is defined in the active class */
    transition: 1s linear all;
  }

  .my-element.ng-hide-add { ... }
  .my-element.ng-hide-add.ng-hide-add-active { ... }
   .my-element.ng-hide-remove { ... }
   .my-element.ng-hide-remove.ng-hide-remove-active { ... }

Link for more details animations

angular ng-class appending classes does not trigger css3 transition

2 Answers2

Linked