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

Question

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

我的网页包含以下html，其中包含 support.html

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;   

support.html

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;   

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

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

Answer 1

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

我仍然不明白为什么会出现这个问题，我们将不胜感激地解释这个问题。