Javascript 阴影中的角度为1.x nAnimate DOM不'；t注册动画时间或添加进入/离开类

我已经尝试了几个小时的解决方案-中的所有副本似乎对我不起作用，因为他们大多建议尝试不同版本的ng animate/angular或在相关类中添加过渡/动画，以便ngAnimate可以正确处理计时

我的问题是，所有这些都正常工作，我的所有属性都在正确的位置上——但现在我正在迁移我们的Chrome扩展，以便在影子DOM封装下工作

注:

• ShadowDOM可能是罪魁祸首，但我不确定为什么或如何修复它。它也可能是不相关的，或者在实际问题中只起到很小的作用（这可能是由于在shadowdom+angular中糟糕的DOM处理造成的）
• 我正在扩展注入生命周期的后期手动引导我的应用程序，因为它应该只在回调后启动。这也可能是罪魁祸首

这是一个-我想我已经尽可能地孤立了这个案例。单击链接应分别在向下/向上滑动动画中打开/关闭它们后面的div。目前他们只是立即开放

以下是相关的样式：

.view-container {
  position: absolute;
  top: 70px;
  bottom: 0;
  background: white;
  transition: all 0.4s 0.2s ease-in-out;
  overflow-y: hidden;
  // slide animation
  &,
  &.ng-hide-remove,
  &.ng-hide-remove-active {
    max-height: 500px;
  }

  &.ng-hide {
    max-height: 0;
  }
}

以下是模板：

<div ng-show="rchCtrl.view == 'flag'"
  class="view-container">
  <div ng-include="'/templates/extension/article-flag-form.html'"
    ng-if="rchCtrl.view == 'flag'"
    ng-controller="ArticleFlagCtrl as flg"
    class="article-flag"></div>
</div>

我的角度初始化部分：

app = angular.module(APP_NAME, ['template-cache', 'ui.router', 'ngCookies', 'geCommon', 'ngAnimate'])

// ...

angular.bootstrap(shadow.querySelector('#ge-ext'), [ APP_NAME ], { debugInfoEnabled: true })
angular.resumeBootstrap()

---

但在所有这些之后，中间类永远不会被添加/删除，动画也不会工作-隐藏/显示会立即显示。

看看这是否是您试图实现的目标：

我对menu.html和style.css做了一些调整。基本上，我所做的是从应该具有动画的元素中删除ng hide/ng show之类的内容，而是在维护动画的同时使用ng class来操纵可见性。ng hide/ng show不是动画的最佳方案的原因是，它们将display:block属性应用于元素，因此应用于它们的任何转换都将不起作用可视性：如果要使用css转换，可见/隐藏是关键

//新样式
#菜单里{
过渡：所有0.4缓进缓出；
}
#菜单里看不见{
身高：0；
不透明度：0；
可见性：隐藏；
}
.文章反馈，
.物品标志{
/*正常起动时的零高度*/
身高：0；
过渡：所有0.4缓进缓出；
}
.article-feedback.visible，
.article-flag.visible{
/*当可见时，高度变为100px*/
高度：100px；
}

发送反馈&；思想
&时代；


标记此页
&时代；

---

如果对我的plnkr还有任何其他问题，请告诉我。

我认为您在css部分遗漏了这一点：

.ng-hide:not(.ng-hide-animate) {
  /* These are just alternative ways of hiding an element */
  display: block!important;
  position: absolute;
  top: -9999px;
  left: -9999px;
}

---

如前所述并在回答中所述。

是否要添加JSFIDLE或SNIPTEP以获得更多帮助？@artgb这里有一个plunker：它再现了问题，希望不是因为我忘记从实际代码中复制某些内容。单击链接应分别在向下/向上滑动动画中打开/关闭它们后面的div。目前它立即显示了upHmm，我知道这个方法，我只是希望解决实际问题，如果我可以的话。随着任务时间的流逝，这可能就是我要做的。谢谢在接受/重写实际问题之前，我将等待其他人是否有任何想法，但是，类

ng hide active

和

ng hide active remove

从未应用。

.ng-hide:not(.ng-hide-animate) {
  /* These are just alternative ways of hiding an element */
  display: block!important;
  position: absolute;
  top: -9999px;
  left: -9999px;
}