angularjs - angular 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

当状态变为非事件状态时，您立即使用 display:none 隐藏了 annotation-panel，因此包含的 annotation-modal 不会可见。

此处使用 ng-animate 将仅在动画时应用 ng-hide(因此，display:none)已经完成了。

否则，您需要使用不同的方法在动画结束后隐藏面板。这是将面板移出屏幕的一种解决方案。请注意处于非事件状态的 transition-delay 如何匹配模态淡出的动画长度。此外，通过仅在非事件状态下进行过渡，当面板变为事件状态时，它会立即移动到视口(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>