單擊父元素時旋轉子元素

Question

每次單擊時，我都希望在按鈕的箭頭中進行動畫變換。
這個想法是每當有人單擊包含這些形成箭頭的div的div時，將箭頭的兩邊（由div組成）旋轉180度。

我嘗試過Toggle，但是沒有用。 這是我的代碼：

 .button-back { width: 50px; height: 50px; background-color: #fff; border-radius: 100%; position: absolute; display: flex; flex-direction: column; justify-content: center; transition: background-color 0.3s; cursor: pointer; } .button-back:hover { background-color: #2da6ff; } .left { left: 5%; } .right { right: 5%; } #left-top { margin-bottom: 3px; width: 15px; height: 3px; position: relative; transform: rotate(-45deg); left: 30%; background: #e2e2e2; z-index: 3; } #left-bottom { margin-top: 3px; width: 15px; height: 3px; position: relative; transform: rotate(45deg); left: 30%; background: #e2e2e2; z-index: 3; } #right-top { margin-bottom: 3px; width: 15px; height: 3px; position: relative; transform: rotate(45deg); left: 40%; background: #e2e2e2; } #right-bottom { margin-top: 3px; width: 15px; height: 3px; position: relative; transform: rotate(-45deg); left: 40%; background: #e2e2e2; } 

 <div class="button-back left"> <div id="left-top"></div> <div id=left-bottom></div> </div> <div class="button-back right"> <div id="right-top"></div> <div id="right-bottom"></div> </div> 

謝謝！

Answer 1

這是我的解決方案
我添加了一個動畫類，以使元素在0.5秒內緩慢旋轉動畫

.animated {
  -moz-transition: transform 0.5s;
  -webkit-transition: transform 0.5s;
  transition: transform 0.5s;
}

然后我做了一個腳本來處理每個箭頭線的旋轉

$(document).ready(function() {
  var leftdegplus = -45;
  var leftdegminus = 45;
  var rightdegplus = 45;
  var rightdegminus = -45;
  $(".left").click(function() {
    leftdegplus = leftdegplus + 180;
    $(this).find("#left-top").css("transform", "rotate(" + leftdegplus + "deg)");

    leftdegminus = leftdegminus - 180;
    $(this).find("#left-bottom").css("transform", "rotate(" + leftdegminus + "deg)");

  });
  $(".right").click(function() {

    rightdegplus = rightdegplus - 180;
    $(this).find("#right-top").css("transform", "rotate(" + rightdegplus + "deg)");

    rightdegminus = rightdegminus + 180;
    $(this).find("#right-bottom").css("transform", "rotate(" + rightdegminus + "deg)");
  });


});

這是完整的代碼片段：

 $(document).ready(function() { var leftdegplus = -45; var leftdegminus = 45; var rightdegplus = 45; var rightdegminus = -45; $(".left").click(function() { leftdegplus = leftdegplus + 180; $(this).find("#left-top").css("transform", "rotate(" + leftdegplus + "deg)"); leftdegminus = leftdegminus - 180; $(this).find("#left-bottom").css("transform", "rotate(" + leftdegminus + "deg)"); }); $(".right").click(function() { rightdegplus = rightdegplus - 180; $(this).find("#right-top").css("transform", "rotate(" + rightdegplus + "deg)"); rightdegminus = rightdegminus + 180; $(this).find("#right-bottom").css("transform", "rotate(" + rightdegminus + "deg)"); }); }); 

 .button-back { width: 50px; height: 50px; background-color: #fff; border-radius: 100%; position: absolute; display: flex; flex-direction: column; justify-content: center; transition: background-color 0.3s; cursor: pointer; } .button-back:hover { background-color: #2da6ff; } .left { left: 5%; } .right { right: 5%; } #left-top { margin-bottom: 3px; width: 15px; height: 3px; position: relative; transform: rotate(-45deg); left: 30%; background: #e2e2e2; z-index: 3; } #left-bottom { margin-top: 3px; width: 15px; height: 3px; position: relative; transform: rotate(45deg); left: 30%; background: #e2e2e2; z-index: 3; } #right-top { margin-bottom: 3px; width: 15px; height: 3px; position: relative; transform: rotate(45deg); left: 40%; background: #e2e2e2; } #right-bottom { margin-top: 3px; width: 15px; height: 3px; position: relative; transform: rotate(-45deg); left: 40%; background: #e2e2e2; } .animated { -moz-transition: transform 0.5s; -webkit-transition: transform 0.5s; transition: transform 0.5s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="button-back left"> <div class="animated " id="left-top"></div> <div class="animated " id=left-bottom></div> </div> <div class="button-back right"> <div class="animated " id="right-top"></div> <div class="animated " id="right-bottom"></div> </div> 

Answer 2

像這樣嘗試））

 let left = document.querySelector('.left'); let arrows = left.children; function removeRotate(){ arrows[0].classList.remove('rotate-top'); arrows[1].classList.remove('rotate-bottom'); } function rotate(){ arrows[0].classList.add('rotate-top'); arrows[1].classList.add('rotate-bottom'); setTimeout(removeRotate, 200); } left.addEventListener('click', rotate); 

 .button-back { width: 50px; height: 50px; background-color: #fff; border-radius: 100%; position: absolute; display: flex; flex-direction: column; justify-content: center; transition: background-color 0.3s; cursor: pointer; } .button-back:hover { background-color: #2da6ff; } .left { left: 5%; } #left-top { margin-bottom: 3px; width: 15px; height: 3px; position: relative; transform: rotate(-45deg); left: 30%; background: #e2e2e2; z-index: 3; } #left-bottom { margin-top: 3px; width: 15px; height: 3px; position: relative; transform: rotate(45deg); left: 30%; background: #e2e2e2; z-index: 3; } .rotate-top{ animation: rotate-center-top 0.3s linear both; } .rotate-bottom{ animation: rotate-center-bottom 0.3s linear both; } @keyframes rotate-center-top { 0% { transform: rotate(0); } 100% { transform: rotate(135deg); } } @keyframes rotate-center-bottom { 0% { transform: rotate(0); } 100% { transform: rotate(-135deg); } } 

 <div class="button-back left"> <div id="left-top"></div> <div id=left-bottom></div> </div> 

Answer 3

我認為您需要為此使用javascript

 var left = document.getElementById("left"); var right = document.getElementById("right"); left.addEventListener("click", function(e) { if (e.target.id !== "left") return; e.target.children["0"].style.transition = "0.3s transform linear"; e.target.children["1"].style.transition = "0.3s transform linear"; e.target.children["0"].style.transform = "rotate(140deg)"; e.target.children["1"].style.transform = "rotate(-140deg)"; setTimeout(function() { e.target.children["0"].style.transition = "0s all linear"; e.target.children["1"].style.transition = "0s all linear"; e.target.children["0"].removeAttribute("style"); e.target.children["1"].removeAttribute("style"); }, 510); }); right.addEventListener("click", function(e) { if (e.target.id !== "right") return; e.target.children["0"].style.transition = "0.3s transform linear"; e.target.children["1"].style.transition = "0.3s transform linear"; e.target.children["0"].style.transform = "rotate(-140deg)"; e.target.children["1"].style.transform = "rotate(140deg)"; setTimeout(function() { e.target.children["0"].style.transition = "0s all linear"; e.target.children["1"].style.transition = "0s all linear"; e.target.children["0"].removeAttribute("style"); e.target.children["1"].removeAttribute("style"); }, 510); }); 

 .button-back { width: 50px; height: 50px; background-color: #fff; border-radius: 100%; position: absolute; display: flex; flex-direction: column; justify-content: center; transition: background-color 0.3s; cursor: pointer; } .button-back:hover { background-color: #2da6ff; } .left { left: 5%; } .right { right: 5%; } #left-top { margin-bottom: 3px; width: 15px; height: 3px; position: relative; transform: rotate(-45deg); left: 30%; background: #e2e2e2; z-index: 3; } #left-bottom { margin-top: 3px; width: 15px; height: 3px; position: relative; transform: rotate(45deg); left: 30%; background: #e2e2e2; z-index: 3; } #right-top { margin-bottom: 3px; width: 15px; height: 3px; position: relative; transform: rotate(45deg); left: 40%; background: #e2e2e2; } #right-bottom { margin-top: 3px; width: 15px; height: 3px; position: relative; transform: rotate(-45deg); left: 40%; background: #e2e2e2; } 

 <div class="button-back left" id="left"> <div id="left-top"></div> <div id=left-bottom></div> </div> <div class="button-back right" id="right"> <div id="right-top"></div> <div id="right-bottom"></div> </div>