Javascript webapp CSS3 动画答案

【问题标题】：Javascript webapp CSS3 animationJavascript webapp CSS3 动画
【发布时间】：2013-04-21 23:38:56
【问题描述】：

我一直在为我的移动 webapp 寻找一个简单的 jquery 动画库

基本上，我想制作“Flip”（翻转板）和“Slide”（翻转板，Android 类似滑入/滑出，旧 div 缩小和淡出）动画，并准备好触摸！

准备好触摸意味着动画可以由用户的交互触发，touchstart、touchmove、touchcancel、touchEnd->autoplay、touchEnd->reverse...等

那里有很多 CSS3 动画库，但我找不到像我上面提到的那样支持触摸的东西，那么有什么东西可以满足要求吗？

顺便说一句，jquery 或 mootools 无关紧要谢谢

【问题讨论】：

【解决方案1】：

使用 jQuery 的内置动画，您应该可以制作相当复杂的动画。如果您需要更多，我会查看jQuery Mobile。

但只是为了做一个简单的滑入滑出，将元素放置在屏幕外，然后在需要时在屏幕上设置动画。

$('.content').css({
  position: 'absolute',
  left: '100%',
  top: 0,
  height: $(window).height()',
  width: $(window).width(),
}

要将其滑入，将left 属性设置为0：

$('.content').animate({
  left: 0
}

【讨论】：

【解决方案2】：

如果你只处理手机，我会使用zepto.js，它比 jQuery 小并且支持

和带有 CSS 变换属性的动画 http://zeptojs.com/#animate

它的 same 与 jQuery 提供或采取一些方法来保持 zepto 苗条:)

【讨论】：

【解决方案3】：

代表所有 jquery 小子中的 mootools 方面，您可以查看 MoobileJS - 作为一个完整的移动 js 框架，它非常可靠，它可以满足您的要求

【讨论】：