应用动画后对话框变得模糊

Question

所以我用 cordova 构建了应用程序。我正在使用 animate.css 将动画应用于页面。

我的页面包含以下 html 并包含 support.html

<div id="home" class="my_cards" ng-init="init()">
    <div ng-include src="'app/shared/templates/headers.html'"></div>
    <div ng-include src="'app/shared/templates/spinner.html'"></div>

   <div class="main" ui-view="mainContent">
     <!-- some content here -->
    
    <div ng-include src="'app/shared/templates/support.html'"></div>

    <footer class="page-footer">
      <div class="row" style="width:100%; height:100%">
        <div class="col footer-col" ui-sref="home">
          <span class="icon ef-home"></span>
          <span>Home</span>
        </div>
        <div class="col footer-col" ui-sref="explore">
          <span class="icon ef-explore"></span>
          <span>Explore</span>
        </div>
        <div class="col footer-col current" ui-sref="mycards">
          <span class="icon ef-cards"></span>
          <span>My Cards</span>
        </div>
        <div class="col footer-col" ng-click="support()">
          <span class="icon ef-call"></span>
          <span>Call</span>
        </div>
      </div>
    </footer>
  </div>

</div>

support.html

<div id="supportModal" class="modal modal-fixed-footer">
    <div class="modal-content center-align">
        <div class="phone">+91 80 8066 8066</div>
        <div class="action row">
            <div class="col s6 m6 l6"><a ng-click="closeSupportModal()">Cancel</a></div>
            <div class="col s6 m6 l6"><a href="tel:+918080668066">Call</a></div>
        </div>
    </div>
</div>

问题是在应用动画时（图像中标记为红色）

对话框变得模糊，上面的按钮不起作用。

Answer 1

好的，所以我只需要将 support.html 移出父 div id="home" class="my_cards" ng-init="init()">。
所以 css 和所有相应的改变。

我还是不明白为什么会出现这个问题，请解释一下这个问题。

应用动画后对话框变得模糊

Dialog becomes blur after applying animation

angularjs

animate.css