Question

尝试动画我的图标以在点击事件时旋转45度，再次单击它后，它会向后旋转。在点击时成功获得我的初始旋转，但是没有点击，在动画完成后它会快速恢复到其原始状态。

HTML

<div class="trip-detail--icon-plus">
  <span class="transport--plus spin" ng-class="{active:showActionOptions}"></span>
</div>

CSS

.spin::before {
  -moz-transition: transform 1s ease;
  -webkit-transition: transform 1s ease;
  -o-transition: transform 1s ease;
  transition: transform 1s ease;
}


.spin.active::before {
  display: inline-block;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

Answer 1

您尝试做的事情需要CSS黑客来模仿点击事件您可以阅读CSS Click events

您还可以在JSFiddle

上查看我的解决方案

<input type="checkbox" id="toggle-1">
<label for="toggle-1">
  <div>Control me</div>
</label>

这是CSS代码

/* Checkbox Hack */
input[type=checkbox] {   
  position: absolute;   
  top: -9999px;   
  left: -9999px;
}

label {   
  display: inline-block;  
  margin: 60px 0 10px 0;  
  cursor: pointer;
}

/* Default State */
div {   
  background: green;   
  width: 400px;   height: 100px;   
  line-height: 100px;   
  color: white;   
  text-align: center;   
  transition: transform 2s ease; 
}

/* Toggled State */
input[type=checkbox]:checked ~ label div {   
  background: red;   
  transform: rotate(45deg);
}

CSS代码中唯一重要的行是div默认状态下的toggled state，checkbox hack和transition属性

更新的答案

由于您使用的是javascript来处理点击事件，因此使用animation代替transition更容易实现，我不知道您的点击处理程序是什么样的，但您说明了它是切换不同的类，所以这是我写的代码

这是CSS代码

@keyframes spin-forward {
  from {
    transform: rotate(0deg);
  } to {
    transform: rotate(45deg);
  }
}

@keyframes spin-backword {
  from {
    transform: rotate(45deg);
  } to {
    transform: rotate(0deg);
  }
}

.spin-right {
  animation: spin-forward 2s ease forwards;
}

.spin-left {
  animation: spin-backword 2s ease forwards;
}

这是Javascript代码

$(function() {
  $('div').on('click', function() {
    var el = $(this);
    var klass = this.className;
    if (klass === "") {
      el.addClass('spin-right');
    } else if (klass === 'spin-right') {
      el.attr('class', 'spin-left');
    } else {
      el.attr('class', 'spin-right');
    }
  });
});

animation更好的原因是因为它提供了更多的控制权。 forwards值允许您在动画结束后将元素保持在新状态。

您可以查看JSFiddle

希望这能解决它

动画完成后，旋转图标会快速恢复

1 个答案: