单击其父元素时旋转子元素

时间：2018-01-30 09:44:29

标签： javascript html5 css3

每次点击按钮，我想在按钮的箭头上进行动画转换 每当有人点击包含形成箭头的div的div时，想法是每次旋转180度（由div组成）。

我尝试使用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>

谢谢！

3 个答案:

答案 0 :(得分：1)

这是我的解决方案
我添加了一个动画类，以便元素在0.5秒内缓慢地进行旋转动画

from collections import defaultdict

list_all = [[['some_item'],'Robert'],
            [['another_item'],'Robert'],
            [['itemx'],'Adam'],
            [['item2','item3'],'Maurice']]

d = defaultdict(list)

for i in list_all:
    d[i[1]].extend(i[0])

# defaultdict(list,
#             {'Adam': ['itemx'],
#              'Maurice': ['item2', 'item3'],
#              'Robert': ['some_item', 'another_item']})

d2 = [[v, k] for k, v in d.items()]

# [[['some_item', 'another_item'], 'Robert'],
#  [['itemx'], 'Adam'],
#  [['item2', 'item3'], 'Maurice']]

然后我制作了一个脚本来处理每个箭头线的旋转

.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;
}

答案 1 :(得分：0)

试试这样））

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>

答案 2 :(得分：-1)

我认为您需要使用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>

相关问题
最新问题