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

Question

我一直在尝试解决几个小时的解决方案 - 所有SO中的重复项似乎对我不起作用,因为他们主要建议尝试不同版本的ng-animate/angular或添加过渡/动画相关的类,以便ngAnimate可以正确处理他们的时间.

我的问题是所有这些都有效,我将所有属性都放在正确的位置 - 但现在我正在迁移我们的Chrome扩展程序以在Shadow DOM封装下工作.

笔记:

• Shadow DOM可能是罪魁祸首,但我不确定为什么或如何解决它.它可能也是无关紧要的,或者只是在实际问题中扮演次要角色(这可能是由于Shadow DOM +角度中的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>

凉亭文件:

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

我的角度初始化部分:

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属性应用于您的元素，因此应用于它们的任何转换都将不起作用。可见性：如果你想使用CSS过渡，可见/隐藏是关键。

// 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 有任何其他问题，请告诉我。