Question

我已经在角度创建了自定义模态指令，但似乎过渡不起作用，我无法弄清楚原因。在我的指令隔离范围内，我有方法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

角度ng-class附加类不会触发css3过渡

2 个答案: