jQuery Mobile導致CSS3動畫在面板顯示上重新觸發

Question

我正在使用jQuery Mobile創建側邊欄面板：

http://demos.jquerymobile.com/1.4.0/panel-fixed/

我的頁面正文（ ui-content ）中有CSS3動畫，這些動畫會在頁面加載時觸發：

h1.page-title{
    -webkit-animation: fade-in 1s linear;
    animation: fade-in 1s linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

一切正常，但當我單擊鏈接以顯示面板時，動畫再次重新觸發（僅一次）。 誰能想到這是什么原因？

page-title類是唯一的，無論如何jQuery Mobile都不會引用它。 我只能認為它模擬了頁面刷新，但是如果兩次單擊鏈接，它就不會再次觸發。

Answer 1

根據Omar的評論，這很好用：

將內容div包裝在<div class="ui-panel-wrapper"> 。 首次打開面板時，它將內容div包裝到具有上述類的div中。 這僅在data-display 推送和顯示時發生 ，而在overlay上不發生。