Question

请提前帮助谢谢...抱歉英语不好...想要在div1和div2上下跳动时弹跳动画效果

我制作了主div，其中有2个div ... div1和div2。

当有人点击按钮时，我希望这样做。

那个时间div1应该从动画的顶部慢慢移出屏幕（慢慢移出顶部屏幕）。

同时div2应该占据屏幕顶部20px的位置。

我已经设置了几乎所有东西，但是我无法给它动画效果，难怪为什么但过渡效果或任何不起作用的东西。如果可能的话，我想用JavaScript代码来做这件事我少用jQuery等等。

我很乐意使用另一种方法，比如使用margin-top将div1移出屏幕而div2移到顶端，如果你推荐任何其他css或javascript，那很好。我只想要动画效果，其中慢速div1和div2移动到顶部。

function myFunction1() {
    document.getElementById("div1").style.marginTop = "-110px";
    document.getElementById("div2").style.marginTop = "20px";
}

function myFunction2() {
    document.getElementById("div1").style.marginTop = "0px";
    document.getElementById("div2").style.marginTop = "0px";

}

#main {
	background-color: grey;
	height: 1000px; 
	width: 100%;
	margin: 0;
	padding: 0;
	}

#div1 {
	background-color: red;
	height: 100px;
	width: 100%;
	margin-top: 0px;
  	position: relative;

	}

#div2 {
	background-color: green;
	height: 100px;
	width: 100%;
	margin-top: 0px;
  	position: relative;

	}

<div id="main">
  
  <div id="div1"> </div>
  
  <div id="div2"> </div>
  

  <button onclick="myFunction1()">Button 1</button>

  <button onclick="myFunction2()">Button 2</button>

</div>

Answer 1

只需向元素添加CSS过渡即可。您可以根据需要更改参数。我相信这是最干净，最有效的解决方案。

编辑：根据OP在评论中的要求，我已经展示了一个过渡功能的例子，它可以模拟轻微的反弹＆＃34;使用极值对过渡的影响。您可以使用在线工具（例如cubic-bezier.com）或Chrome开发人员工具快速创建自己的过渡功能并进行实时测试（您可以点击要检查的元素的过渡函数来编辑即时的）。请注意，此功能目前尚未得到普遍支持（请参阅：Safari Bug 45761）

Transitions on MDN

＆＃13;

function myFunction1() {
    document.getElementById("div1").style.marginTop = "-110px";
    document.getElementById("div2").style.marginTop = "20px";
}

function myFunction2() {
    document.getElementById("div1").style.marginTop = "0px";
    document.getElementById("div2").style.marginTop = "0px";

}

＆＃13;

#main {
	background-color: grey;
	height: 1000px; 
	width: 100%;
	margin: 0;
	padding: 0;
	}

/* *** THIS IS NEW *** */
#main div {
  -webkit-transition: margin 1s cubic-bezier(1,.7,.49,1.7);
          transition: margin 1s cubic-bezier(1,.7,.49,1.7);
}
/* *** END NEW *** */

#div1 {
	background-color: red;
	height: 100px;
	width: 100%;
	margin-top: 0px;
  	position: relative;

	}

#div2 {
	background-color: green;
	height: 100px;
	width: 100%;
	margin-top: 0px;
  	position: relative;

	}

＆＃13;

<div id="main">
  
  <div id="div1"> </div>
  
  <div id="div2"> </div>
  

  <button onclick="myFunction1()">Button 1</button>

  <button onclick="myFunction2()">Button 2</button>

</div>

＆＃13;

单击按钮将div1移出屏幕，div2从顶部移动到20px时弹出动画效果

1 个答案: