我正试图找出一种可靠的跨(现代)浏览器方法来使用CSS3动画事件和事件侦听器来获得对CSS3动画的精确调整控制。我知道这样做是有可能的。遗憾的是,尽管在过去的2-3周里我做了这么多研究,但我现在的能力还远远不够。
到目前为止,这是我在这方面的小动作:
下面是我要做的事情:我有一个<ul>,id为#main,id为<li>和一个.box类。当用户单击任何.box时,它都会将.move-y类添加到($this)中--它还同时将.move-x类添加到其余的列表项中。当用户单击另一个.box时,所有现有的.move-y and .move-x类都替换为.move-y-rvs a
正如我目前所理解的那样,$("#someElement").animate()将相对于任何其他JavaScript语句异步执行。例如:
$("#anotherElement").css("display", "none");
$("#someElement").animate();
//Setting the CSS display may fire AFTER the animation takes place.
如果我对动画工作原理的理解是正确的,我如何:
使动画与代码的其余部分同步运行?,如果我想要订购
我有一个简单的菜单,目前正在使用CSS网格,我想要动画。然而,grid-template-columns不能顺利地动画化。我现在做的菜单完全不同,但是在我寻找解决方案的过程中,我遇到了一些我不太明白的东西。我的第一个想法,虽然它可能不是一个好主意,也可能不是关键帧动画的一个合适的替代品,我的第一个想法是在item循环中更新样式,以动画化项目的不断增长的大小。它不起作用。
相关的联合来文:
$('#select-oak').hover(function () {
let start = new Date().getTime();