动画在打开购物车抽屉时工作一次，然后就不再工作答案

【问题标题】：animation works once when opening a cart drawer and then doesn't work afterwards动画在打开购物车抽屉时工作一次，然后就不再工作
【发布时间】：2020-06-09 14:18:53
【问题描述】：

我处理这个错误已经有一段时间了，我不知道该怎么办。

我有两个简单的 CSS 动画来打开和关闭购物车。

.animate-close-cart {
  animation: closeCart 0.2s 0s 1 linear forwards;
}
@keyframes closeCart {
  from {
    transform: translateX(-35%);
  }
  to {
    transform: translateX(0);
  }
}

.animate-open-cart {
  animation: openCart 0.2s 0s 1 linear forwards;
}
@keyframes openCart {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-35%);
  }
}

单击我的购物车按钮后，我会添加或删除相应的类：

打开购物车：

       value: function _openMiniCart() {
         var mainWrapper = document.getElementById("main_wrapper");
         mainWrapper.classList.remove("animate-close-cart");
         mainWrapper.classList.add("animate-open-cart");
       }

关闭购物车：

       value: function _closeMiniCart() {
         var mainWrapper = document.getElementById("main_wrapper");
         mainWrapper.classList.remove("animate-open-cart");
         mainWrapper.classList.add("animate-close-cart");
       }

main_wrapper 块环绕着我的整个网页：

<body>
 <div id="main_wrapper">
   // header, template, page contents etc.
 <div/>
</body>

打开动画播放的购物车，网页向左移动，显示购物车。完美的。关闭动画播放的购物车，网页移回右侧，隐藏购物车。

那么……

再次打开它，网页只是跳转，没有动画向左显示购物车，但是关闭它，它会播放动画并向右移动。

第一次打开后的每次打开总是使网页立即跳转到-35%。

我不知道如何调试此问题或可能导致此问题的原因。

编辑：

使用 CSS 转换同样的错误，它只在第一个打开的购物车上提供平滑过渡，所有其他打开的购物车立即跳转：

#main_wrapper {
  transition: transform 0.2s;
}

.animate-close-cart {
  transform: translateX(0);
}

.animate-open-cart {
  transform: translateX(0);
}

【问题讨论】：

您不需要 animation 来进行这种简单的 A 到 B 状态更改。改用 CSS 过渡。
@chriskirknielsen 我已经编辑了我的问题以包含 CSS 过渡——同样的错误发生了。
只是把东西扔在那里，而不是做一个classList.remove，然后classList.add，只尝试一个classList.replace。这至少可以摆脱神经质。
你应该有一个默认状态，比如.cart 和translate(-35%) 和一个类.cart-open 和translate(0)。这样，您只需打开/关闭一个班级。此外，您更新的代码示例已关闭和开放给translate(0)。

标签： javascript html css user-interface animation

【解决方案1】：

所以当您说整个页面移动时，您的意思是您将主内容屏幕滑动到视线之外吗？或者，如果它们都可用，您允许这些块在两侧保持所有可见性？我不确定我是否正确理解了意图，但这里有一个我过去使用过的效果示例，如果它有助于实现您的目标。否则，您的痛点的可重现示例而不仅仅是 sn-ps 可能会让您更清楚地找到解决方案。干杯。

toggleMe = () => {

  const side = document.getElementById('side-wrapper');
  
  side.classList.toggle('slide-me');

}

#main-wrapper {
  height: 80vh;
  width: 80vw;
  margin: 2rem;
  border: red 5px dashed;
  display: flex;
  flex-direction: row;
  overflow: hidden; /* make this visible if you want to see in action */
}

#section-wrapper, #side-wrapper {
  outline: #fff 3px dashed;
  outline-offset: -10px;
}

#section-wrapper {
  height: 100%;
  width: 100%;
  background-color: #00f;
}

#side-wrapper {
  height: 100%;
  width: 350px;
  background-color: #0f0;
  margin-right: -350px;
  transition: margin-right 1s ease-in-out;
}

.slide-me {
  margin-right: 0 !important;
}

#example input:checked:after {
  content: 'SIDE IS OPEN';
  display: inline-block;
  margin-left: 1rem;
  color: green;
}

<label id="example">
  Click to toggle side slide
  <input type="checkbox" onclick="toggleMe()">
</label>

<div id="main-wrapper">
  <div id="section-wrapper"></div>
  <div id="side-wrapper"></div>
</div>

【讨论】：