jQuery Mobile导致CSS3动画在面板显示上重新触发

Question

I am using jQuery Mobile to create a sidebar panel:

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

I have CSS3 animations in the body of my page ( ui-content ), which fire on page load:

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

Everything works fine, with the exception that when I click the link to show the panel, the animations refire again (just one time). Can anyone think of what's causing this?

The page-title class is unique and not referenced by jQuery mobile in anyway. I can only think that its simulating a page refresh, but then if the link is clicked twice it doesn't refire again.

Answer 1

Per Omar's comments, this works well:

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 .