javascript - 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 的评论，这很有效:

Wrap content div in <div class="ui-panel-wrapper">. When opening panel for the first time, it wraps content div in a div with the aforementioned class. This happens only for data-display push and reveal, but not overlay.