是否可以对 div 的左侧属性设置 CSS 动画,从而使 float 在它旁边的 div 自动移动相同的增量?
我已经制作了一些 jsfiddle 代码来证明我的问题没有按照我希望的方式工作。单击红色方 block 以查看它的动画效果,尽管它位于蓝色方 block 的顶部。
我希望#block1 能够通过动画 block1 的 CSS 属性“left”来有效地插入#block2。
CSS:
* {
margin:0;
padding:0;
}
.red {
float: left;
position: relative;
width:100px;
height:100px;
background-color: #F00;
}
.blue {
float: left;
width:100px;
height:100px;
background-color: #00F;
}
.animateMenu {
-webkit-animation: myfirst 0.5s forwards;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
from {left: 0px;}
to {left: 100px;}
}
HTML
<div id="block1" class="red"></div>
<div id="block2" class="blue"></div>
Javascript
$("#block1").on( { "mousedown" : onInteraction } );
function onInteraction(e) {
$("#block1").removeClass("animateMenu").addClass("animateMenu");
}
非常感谢您提前提供的帮助。
最佳答案
不是动画left
,而是动画margin-left
。这是修改后的 fiddle .
关于javascript - 通过动画 div 向左推送动画 float 的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25746355/