javascript - Shadow DOM 中的 Angular 1.x ngAnimate 不注册动画时间或添加进入/离开类

Question

我已经尝试了几个小时的解决方案 - SO 中的所有重复项似乎都不适合我 因为他们大多建议尝试不同版本的 ng-animate/angular 或在相关类中添加过渡/动画，以便 ngAnimate 可以正确处理它们的时间。

我的问题是所有这一切都有效，而且我的所有属性都在正确的位置 - 但现在我正在迁移我们的 Chrome 扩展程序以在 Shadow DOM 封装下工作。

注意事项:

• Shadow DOM 可能是罪魁祸首，但我不确定为什么或如何修复它。它也可能无关紧要或只在实际问题中发挥次要作用(这可能是由于 Shadow DOM + angular 中的 DOM 处理不当)
• 我在扩展注入(inject)的生命周期后期手动引导我的应用程序，因为它应该只在回调后启动。这也可能是罪魁祸首

这是一个plunker - 我想我在这里尽可能地隔离了这个案子。单击链接应分别在向下/向上滑动动画中打开/关闭它们之后的 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>

Bower 文件:

"dependencies": {
    "jquery": "^2.2.1",
    "trackjs": "^2.8.3",
    "angular": "^1.6.0",
    "qtip2": "^2.2.1",
    "ng-qtip2": "1.3.3",
    "angular-ui-router": "^0.2.18",
    "angular-cookies": "^1.6.0",
    "angular-resource": "^1.6.0",
    "bootstrap": "^3.3.7",
    "angular-animate": "^1.6.0"
  },
  "resolutions": {
    "angular": "1.6.6"
  }

我的 Angular 初始化部分:

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

// ...

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

但在这之后，中间类永远不会添加/删除，并且动画不工作 - 隐藏/显示显示是立即的。

Answer 1

看看这是否是您要实现的目标:

https://plnkr.co/edit/0rmEfPlsn3GsK6rtLalP?p=preview

我对 menu.html 和 style.css 做了一些调整。基本上，我所做的是从应该具有动画的元素中删除诸如 ng-hide/ng-show 之类的东西，而是将 ng-class 用于操作维护动画时的可见性。 ng-hide/ng-show 不是动画的最佳创意的原因是它们将 display: block 属性应用于您的元素，因此应用于它们的任何过渡都将不起作用。 visiblity: visible/hidden 如果你想使用 css transitions 是关键。

// New styles
#menu li {
  transition: all 0.4s ease-in-out;
}

#menu li.invisible {
  height: 0;
  opacity: 0;
  visibility: hidden;
}

.article-feedback,
.article-flag {
  /* Zero height in normal start */
  height: 0;
  transition: all 0.4s ease-in-out;
}

.article-feedback.visible,
.article-flag.visible {
  /* When visible, height goes to 100px */
  height: 100px;
}

<ul id="menu"
  class="list-unstyled"
  ng-class="{'view-open': rchCtrl.view != null}"
  ng-show="rchCtrl.menuOpen"
  ng-controller="RelatedResearchesCtrl as rchCtrl">
  <li ng-class="{'invisible': rchCtrl.view && rchCtrl.view != 'feedback'}">
    <a fake-click
      ng-click="rchCtrl.openView('feedback')">
      Send feedback &amp; ideas
    </a>
    <span class="icon-close"
      ng-show="rchCtrl.view == 'feedback'"
      ng-click="rchCtrl.openView(null); $event.stopPropagation()">
      &times;
    </span>

    <!-- I've removed the ng-show and added ng-class, so transitions will work -->
    <div class="view-container">
      <div style="background: red;"
        ng-class="{'visible': rchCtrl.view == 'feedback'}"
        class="article-feedback"></div>
    </div>
  </li>
  <li ng-class="{'invisible': rchCtrl.view && rchCtrl.view != 'flag'}">
    <a fake-click
      ng-click="rchCtrl.openView('flag')">
      Flag this page
    </a>
    <span class="icon-close"
      ng-show="rchCtrl.view == 'flag'"
      ng-click="rchCtrl.openView(null); $event.stopPropagation()">
      &times;
    </span>
    <div class="view-container">

      <!-- I've removed the ng-show and added ng-class, so transitions will work -->
      <div style="background: blue;"
        ng-class="{'visible': rchCtrl.view == 'flag'}"
        class="article-flag"></div>
    </div>
  </li>
</ul>

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