Question

尝试使用css过渡/变换构建带有动画的汉堡包按钮。我希望旋转只在第一个和第三个跨度的平移完成后开始（它们应该与中间跨度重叠）。因此我把变换链接在css中就像这样：

$( window ).load(function() {
  
  $("#hamburger").click(function(){
    $(this).toggleClass("open");
  });
  
});

但似乎无效，轮换与翻译一起开始。任何人都知道如何解决？

＆＃13;

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background-color: #333;
}

#hamburger {
  margin: 2em;
  position: relative;
  width: 80px;
  height: 60px;
  cursor: pointer;
}

#hamburger span {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: #fff;
  
  -webkit-transition: transform .25s linear;
  -moz-transition: transform .25s linear;
  -o-transition: transform .25s linear;
  transition: transform .25s linear;
  
  &:nth-child(2) {
    -webkit-transition: width 0s linear .25s;
    -moz-transition: width 0s linear .25s;
    -o-transition: width 0s linear .25s;
    transition: width 0s linear .25s;
  }
}

#hamburger span:nth-child(1) {
  top: 0;
}

#hamburger span:nth-child(2) {
  top: 28px;
}

#hamburger span:nth-child(3) {
  bottom: 0;
}

#hamburger.open span:nth-child(1) {
  -webkit-transform: translate(0, 28px) rotate(45deg);
  -moz-transform: translate(0, 28px) rotate(45deg);
  -o-transform: translate(0, 28px) rotate(45deg);
  transform: translate(0, 28px) rotate(45deg);
}

#hamburger.open span:nth-child(2) {
  width: 0;
}

#hamburger.open span:nth-child(3) {
  -webkit-transform: translate(0, -28px) rotate(-45deg);
  -moz-transform: translate(0, -28px) rotate(-45deg);
  -o-transform: translate(0, -28px) rotate(-45deg);
  transform: translate(0, -28px) rotate(-45deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="hamburger">
    <span></span>
    <span></span>
    <span></span>
</div>

＆＃13;

    datum_von  NEG_00_04  NEG_04_08  NEG_08_12  NEG_12_16 NEG_16_20  NEG_20_24
    2017-10-19        7.96       7.14       0.27       1.82       0.50       0.58   
    2017-10-20        7.82       6.50       0.28       1.43       0.49       0.56   
    2017-10-21       10.61       8.51       1.39       2.26       1.73       1.50   
    2017-10-22       18.07      12.92       2.72       7.44       2.04       1.32   
    2017-10-23       10.46       9.73       0.87       1.26       0.72       0.68

＆＃13;

Answer 1

您可以将变换拆分为两个不同的类，一个使用translate（），另一个使用rotate（），然后使用.delay（）拆分转换，如下所示：

$("#hamburger").click(function(){
    $(this).toggleClass("translateClass");
    $(this).delay(250).toggleClass("rotateClass");
);

Answer 2

解决了@Kadin Zhang建议在两个过渡中分割动画。我已经使用top属性中的一个简单更改替换了translate转换，因为这样transform-origin随元素一起移动（否则原点保留在前一个坐标系中并且旋转将是错误的。）

$( window ).load(function() {
  
  var state = false;
  
  $("#hamburger").click(function(){
    self = $(this);
    if (!state) {
      self.addClass("open-translate");
      setTimeout(function() {
        self.addClass("open-rotate");
        state = true;
      }, 250);
    }
    else {
      self.removeClass("open-rotate");
      setTimeout(function() {
        self.removeClass("open-translate");
        state = false;
      }, 250);
    }    
  });
  
});

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background-color: #333;
}

#hamburger {
  margin: 2em;
  position: relative;
  width: 80px;
  height: 60px;
  cursor: pointer;
}

#hamburger span {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: #fff;
  
  -webkit-transition: all .25s linear;
  -moz-transition: all .25s linear;
  -o-transition: all .25s linear;
  transition: all .25s linear;
  
  &:nth-child(2) {
    -webkit-transition: width 0s linear .25s;
    -moz-transition: width 0s linear .25s;
    -o-transition: width 0s linear .25s;
    transition: width 0s linear .25s;
  }
}

#hamburger span:nth-child(1) {
  top: 0;
}

#hamburger span:nth-child(2) {
  top: 28px;
}

#hamburger span:nth-child(3) {
  top: 56px;
}

#hamburger.open-translate span:nth-child(1) {
  top: 28px;
}


#hamburger.open-rotate span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#hamburger.open-translate span:nth-child(2) {
  width: 0;
}

#hamburger.open-translate span:nth-child(3) {
  top: 28px;
}

#hamburger.open-rotate span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="hamburger">
    <span></span>
    <span></span>
    <span></span>
</div>

CSS转换：链式转换同时启动

2 个答案: