css - 元素在 safari 过渡期间错位

Question

我创建了一个汉堡包菜单动画，它将汉堡包变成一个圆圈中的箭头。它在 chrome、firefox 和 opera 中运行良好，但在 safari 中，变成圆圈的元素在过渡期间会错位。过渡后，它被放置在正确的位置。我找不到发生这种情况的原因。这是带有动画的代码:

let navicon = document.querySelector('#navicon');
navicon.addEventListener('click', toggleMenu, false);
function toggleMenu(event) { 
  navicon.classList.contains('clicked')
    ? navicon.classList.remove('clicked')
  : navicon.classList.add('clicked');
}

.navicon {
  width: 20px;
  height: 15px;
  position: absolute;
  top: 30px;
  left: 50%;
  display: inline-block;
  transition: all 300ms ease;
  cursor: pointer;
  z-index: 101;
}

.navicon .line {
  position: absolute;
  width: 100%;
  height: 3px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  transition: all 300ms ease;
}

.navicon .ham {
  top:40%;
  background-color: transparent;
  box-shadow: 0 0 0px 3px #000 inset;
  box-sizing: border-box;
  transform: translateX(-50%);
}

.navicon .bun--top {
  top:0
}
.navicon .bun--bottom {
  top:80%;
  border-color: #000;
}

 .navicon.clicked {
  top: 23px;
  right: 10px;
  width: 30px;
  height: 30px;
  transform: rotate(180deg);// Makes reverse animation different
}

.navicon.clicked .ham {
  top:50%;
  left: 50%;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(135deg);
  box-shadow: 0 0 0px 2px #000 inset;
}

.navicon.clicked .bun {
  top:50%;
  width: 10px;
}

.navicon.clicked .bun--top {
  transform: translate( -4px, -50%);
  height: 3px;
}

.navicon.clicked .bun--bottom {
  background-color: transparent;
  transform: translate(-8px, -4px);
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-right: 4px solid #000;
  border-bottom: 4px solid transparent;
}

<div id="navicon" class="navicon">
  <div class="line bun bun--top"></div>
  <div class="line ham"></div>
  <div class="line bun bun--bottom"></div>
</div>

Answer 1

Safari 似乎按顺序呈现您的动画，而不是正确组合它们。把他骗到一个动画里就行了

let navicon = document.querySelector('#navicon');
navicon.addEventListener('click', toggleMenu, false);
function toggleMenu(event) { 
  navicon.classList.contains('clicked')
    ? navicon.classList.remove('clicked')
  : navicon.classList.add('clicked');
}

.navicon {
  width: 20px;
  height: 15px;
  position: absolute;
  top: 30px;
  left: 50%;
  display: inline-block;
  transition: all 300ms ease;
  cursor: pointer;
  z-index: 101;
}

.navicon .line {
  position: absolute;
  width: 100%;
  height: 3px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  transition: all 300ms ease;
}

.navicon .ham {
  top:40%;
  background-color: transparent;
  box-shadow: 0 0 0px 3px #000 inset;
  box-sizing: border-box;
  transform: translateX(-50%);
}

.navicon .bun--top {
  top:0
}
.navicon .bun--bottom {
  top:80%;
  border-color: #000;
}

 .navicon.clicked {
  top: 23px;
  right: 10px;
  width: 30px;
  height: 30px;
  transform: rotate(180deg);// Makes reverse animation different
}

.navicon.clicked .ham {
  top:0%;
  left: 0%;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  transform: translate(0%, 0%) rotate(135deg);
  box-shadow: 0 0 0px 2px #000 inset;
}

.navicon.clicked .bun {
  top:50%;
  width: 10px;
}

.navicon.clicked .bun--top {
  transform: translate( -4px, -50%);
  height: 3px;
}

.navicon.clicked .bun--bottom {
  background-color: transparent;
  transform: translate(-8px, -4px);
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-right: 4px solid #000;
  border-bottom: 4px solid transparent;
}

<div id="navicon" class="navicon">
  <div class="line bun bun--top"></div>
  <div class="line ham"></div>
  <div class="line bun bun--bottom"></div>
</div>