HTML / CSS動畫-JavaScript

Question

我一直在嘗試對滑動門進行動畫處理，該滑動門是通過單擊按鈕觸發的。

這是我的小提琴

我有推拉門的兩側。 左側為藍色，右側為紅色。 左側應滑動到左側，而右側門應滑動到右側。

首先，我試圖將按鈕定位在門的中間。 我正在使用

#button {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
}

但是按鈕仍然有點偏斜

但是其次，當單擊按鈕時，門的兩側應同時滑出，但不幸的是，只有紅色門才能正常工作。

藍色的門被卡住了。 我究竟做錯了什么？

Answer 1

定義導致問題的相同變量，對於左門，您需要減小值_pos--

按鈕解決方案

left: calc(50% - 38px);

 #container { width: 810px; } #button { z-index: 2; position: absolute; top: 50%; left: 50%; } #wrapper { z-index: 1; position: absolute; display: inline-block; width: 810px; } #left { display: inline-block; width: 400px; } #right { display: inline-block; width: 400px; } #myContainer { width: 400px; height: 300px; position: relative; background: yellow; } #myAnimationLeft { width: 400px; height: 300px; position: absolute; background-color: blue; } #myAnimationRight { width: 400px; height: 300px; position: absolute; background-color: red; } 

 <div id="container"> <div id="button"> <button onclick="myMove()">Click Me</button> </div> <div id="wrapper"> <div id="left"> <div id="myContainer"> <div id="myAnimationLeft"></div> </div> </div> <div id="right"> <div id="myContainer"> <div id="myAnimationRight"></div> </div> </div> </div> </div> <script> function myMove() { var _elem = document.getElementById("myAnimationLeft"); var _pos = 0; var _id = setInterval(_frame, 5); function _frame() { if (_pos == 410) { clearInterval(_id); } else { _pos--; _elem.style.right = _pos + 'px'; _elem.style.left = _pos + 'px'; } } var elem = document.getElementById("myAnimationRight"); var pos = 0; var id = setInterval(frame, 5); function frame() { if (pos == 410) { clearInterval(id); } else { pos++; elem.style.left = pos + 'px'; elem.style.right = pos + 'px'; } } } </script> 

---

基於@shubhamagrawal的答案創建的JQuery解決方案。

 $(document).ready(function() { $('button').click(function() { $("#myAnimationLeft").offset({ left: 0 }) $("#myAnimationRight").offset({ left: $("#myAnimationRight").width() }) $("#myAnimationLeft").animate({ left: -$("#myAnimationLeft").width() }, 2000); $("#myAnimationRight").animate({ left: $("#myAnimationRight").width() }, 2000); }) }) 

 body, html { margin: 0; padding: 0; } #container { width: 810px; position:relative; overflow:hidden; height:300px; } #button { z-index: 2; position: absolute; top: calc(50% - 11px); left: calc(50% - 34px); } #wrapper { z-index: 1; position: absolute; display: inline-block; width: 810px; } #left { display: inline-block; width: 400px; } #right { display: inline-block; width: 400px; } #myContainer { width: 400px; height: 300px; position: relative; background: yellow; } #myAnimationLeft { width: 400px; height: 300px; position: absolute; background-color: blue; } #myAnimationRight { width: 400px; height: 300px; position: absolute; background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="button"> <button>Click Me</button> </div> <div id="wrapper"> <div id="left"> <div id="myContainer"> <div id="myAnimationLeft"></div> </div> </div> <div id="right"> <div id="myContainer"> <div id="myAnimationRight"></div> </div> </div> </div> </div> 

Answer 2

您可以使用簡單的JQuery animation執行所需的操作。

小提琴

這是代碼：

 $("button").click(function() { $(".one").animate({ left: '0' }); $(".three").animate({ left: '200px' }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="one" style="background:#98bf21;height:100px;width:100px;position:absolute;left:100px;"></div> <div class="two" style="background:blue;height:100px;width:100px;position:absolute;left:100px;"> </div> <div class="three" style="background:red;height:100px;width:100px;position:absolute;left:100px;"></div> <button style="position:absolute;left:110px;top:50px;"> CLICK ME </button> 

Answer 3

您需要減去按鈕的寬度和高度的一半，以使其居中。
如果按鈕的寬度固定，則使用calc(50% - 50px)作為Icewine的答案是正確的。

對於具有動態寬度和高度的元素，您可以始終使用：

position: absolute; 
top: 50%; 
left: 50%;
transform:translateX(-50%) translateY(-50%);

即使您不知道元素的高度和寬度，上面的代碼也會將元素居中。

例：

 body { padding: 0px; margin: 0px; } div { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); background: red; } 

 <div></div> 

至於動畫，為什么不使用類並讓CSS處理動畫呢？

 function myMove() { document.getElementById("myAnimationLeft").className = "DoorOpenLeft"; document.getElementById("myAnimationRight").className = "DoorOpenRight"; } 

 * { box-sizing: border-box; } body { margin: 0px; } #container { width: 100%; } #button { z-index: 2; position: absolute; top: 50%; left: 50%; display: inline-block; transform: translateX(-50%) translateY(-50%); } #wrapper { z-index: 1; position: absolute; width: 100%; overflow-x: hidden; clear: both; } #left { display: inline-block; width: 50%; float: left; } #right { display: inline-block; width: 50%; float: right; } #myContainer { width: 100%; height: 300px; position: relative; background: yellow; } #myAnimationLeft { width: 100%; height: 300px; left: 0px; position: absolute; background-color: blue; transition: all 1s ease; } #myAnimationRight { width: 100%; height: 300px; left: auto; right: 0px; position: absolute; background-color: red; transition: all 1s ease; } .DoorOpenLeft { left: -100% !important; } .DoorOpenRight { right: -100% !important; } 

 <div id="container"> <div id="button"> <button onclick="myMove()">Click Me</button> </div> <div id="wrapper"> <div id="left"> <div id="myContainer"> <div id="myAnimationLeft"></div> </div> </div> <div id="right"> <div id="myContainer"> <div id="myAnimationRight"></div> </div> </div> </div> </div> 

Answer 4

應該是這樣

 function myMove() { var elem = document.getElementById("myAnimationRight"); var elem_l = document.getElementById("myAnimationLeft"); var elem_R = document.getElementById("myAnimationRight"); elem_l.className += " opened"; elem_R.className += " opened"; } 

 #container { width: 800px; } #button { z-index: 2; position: absolute; top: 50%; left: 50%; } #wrapper { z-index: 1; position: absolute; display:inline-block; width: 810px; overflow:hidden; } #left { display:inline-block; width: 400px; } #right { display:inline-block; width: 400px; } #myContainer { width: 400px; height: 300px; position: relative; background: yellow; } #myAnimationLeft { width: 400px; height: 300px; position: absolute; background-color: blue; transition:linear all 0.5s; left:0; } #myAnimationRight { width: 400px; height: 300px; position: absolute; background-color: red; transition:linear all 0.5s; right:0; } #myAnimationRight.opened{ right:-100%; transition:linear all 0.5s; } #myAnimationLeft.opened{ left:-100%; transition:linear all 0.5s; } 

 <div id="container"> <div id ="button"> <button onclick="myMove()">Click Me</button> </div> <div id="wrapper"> <div id ="left"> <div id ="myContainer"> <div id ="myAnimationLeft"></div> </div> </div> <div id ="right"> <div id ="myContainer"> <div id ="myAnimationRight"></div> </div> </div> </div> </div> 

您可以通過CSS處理動畫，只需在按鈕單擊時將opened類添加到元素中即可。

Answer 5

對於按鈕，您需要減去按鈕的寬度和高度以使其居中。 左：calc（50％-50px）; 如果按鈕寬度為100像素；

另外，您需要將按鈕上方的父div設置為position：relative; 或絕對不會工作。 您還應該設置父div的高度。