角度 ng-class 附加类不会触发 css3 转换

Question

我已经在 Angular 中创建了自定义模态指令，但似乎转换不起作用，我不知道为什么。 在我的指令隔离范围内，我有方法 toggleModal() 将 modalState 切换到 true / false。所以除了动画之外一切都基本正常

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;
}

所以基本上使用ng-class im在两个类之间切换

.active 和.inactive 但似乎过渡并没有使班级的变化产生动画效果，我想我有一些普遍的错误，但找不到。我不使用ngAnimate，因为我正在制作模块，所以我没有很多依赖项，这就是我使用类自定义它的原因

Answer 1

当状态变为非活动时，您会立即将annotation-panel 和display:none 隐藏起来，因此包含的annotation-modal 将不可见。

这里使用ng-animate 将仅在动画完成时应用ng-hide（因此，display:none）。

否则，您需要在动画完成后使用不同的方法来隐藏面板。这是将面板移出屏幕的一种解决方案。注意处于非活动状态的transition-delay 如何匹配模态淡出的动画长度。此外，通过仅在非活动状态下进行转换，当面板变为活动状态时，它会立即移动到视口。

.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>

Answer 2

如果你只需要让元素不显示，你应该选择 ng-hide

这里有一些动画CSS

//
//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 { ... }

链接了解更多详情animations