“Div 加载”CSS 动画

Question

我正在通过 Cordova 制作一个模仿单页原生应用的 iOS 应用。

我正在使用 PageTransitions.js，它使用 div 作为完整页面（类似于 jQuery mobile）来模拟平滑的页面转换。有了它，我使用 jQuery onClick 函数来触发 css 动画。

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

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