我正在尝试使用 metro js 组合两个动画插入。我想结合multiple stops动画 flip animation 。翻转动画应该在延迟后发生。您能帮助我开始使用一些示例代码吗？
感谢您的帮助。
最佳答案
这取决于您需要多少破解。
有一个简短而肮脏的方法可以做到这一点，但我不能保证它可以跨浏览器工作，如果您关心同步问题，您还必须仔细调整。
解释一下，您可以将一个图 block 嵌入到另一个图 block 的框架内，但是内部图 block 不会“智能”地判断它是否正在显示:它不会在每次再次显示时重置其动画.
如果您以翻转图 block 作为外部动画开始，然后嵌入多个停止图 block 作为翻转显示的第一面，则可以显示多个停止点，然后图 block 翻转。
其中棘手的是，delay 值就是:动画之间的延迟，但不考虑动画运行的时间。为了在翻转之前显示多个停止图 block 的所有停止点，翻转图 block 的延迟必须为:number-of-stops * ( multiple-stops-tile-delay + multiple-stops-tile-single-animation -time ) - Flip-tile-single-animation-time
<强> Here is an example jsfiddle (我只是修改了给出的两个示例)其中翻转图 block 的延迟设置得不够长，因为我懒得计算/代码潜水毫秒动画时间。我只是使用停靠次数 * 延迟时间来代替。因此，将多个停止点图 block 设置为 6000 延迟并包含 3 个停止点，我将父翻转图 block 设置为 18000 延迟。如果你让它运行超过几次翻转，它就会变得非常不同步。
注意:我已经在 Chrome、Firefox 和 IE 9 中对此进行了测试，它基本上在这三个版本中都有效，但 IE 可能有与其他两个不同的奇怪延迟时间，这可能会导致停止在所有三个浏览器中翻转同步是不可能的。
更长、更优雅的方法将涉及对插件的代码更改，以强制重置其他图 block 内的图 block 的动画，或一些类似的方法，但不仅仅是简单地指出这一点超出了简单答案的范围。
关于jquery - 使用 Metro JS 进行平铺动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12647775/