“Div load”CSS动画

Question

我通过Cordova制作了一款模仿单页原生应用的iOS应用。

我使用PageTransitions.js并使用div作为完整页面（类似于jQuery mobile）来模拟平滑的页面过渡。有了它，我使用jQuery onClick函数来激活css动画。

我的问题是：有没有办法延迟播放css动画，直到设备专注于他们所包含的div？我想在div load上播放这些动画，以便为页面提供图层，而不是看起来像静态网页。

Answer 1

很容易;没有你的代码，我只是提供一些伪代码。

对于你的css：

#some-id.active .some-class {
  /*do some animation or other */
}

并做一个像这样的javascript：

// depending on your situation and other scripts you are using
// you'll probably want to wrap it jQuery closure to make sure
// that $ is jQuery.
$(document).ready(function(){
  $('#some-id').onClick( function() {
    $(this).addClass('active'); // depending on setup you may want to remove this from other selectors when adding it to the current one.
  }
}