javascript - 防止动画延迟引起的闪烁

Question

我在轮播中实现了与此https://codepen.io/dev_jonas/pen/dyPxyvp类似的解决方案（非常感谢作者！）。但是，我现在的问题是，在更改幻灯片/初始加载时，整个文本会闪烁一秒钟 - 这在刷新 codepen 时也可以看到。我相信这是由animation-delay平滑关闭所必需的关闭动画引起的。有人可以帮助我解决这个问题 - 非常感谢！

const box = document.querySelector('.box');
let isOpen = false;
document.querySelector('button').addEventListener('click', () => {
  isOpen = !isOpen;
  isOpen ? box.classList.add('open') : box.classList.remove('open')   
});

@import url("https://fonts.googleapis.com/css?family=Dosis:200,400&display=swap");
body {
  color: #000;
  background: #e2e2e2;
  font-family: "Dosis", sans-serif;
}

/* Box */
.box {
  margin: 22px auto;
  width: 320px;
  padding: 12px 32px 64px;
  max-height: 162px;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
}

.box.open {
  max-height: 100rem;
  transition: max-height 0.3s cubic-bezier(0.9, 0, 0.8, 0.2);
}

/* Text */
@keyframes open {
  from {
    line-clamp: 3;
    -webkit-line-clamp: 3;
  }
  to {
    line-clamp: initial;
    -webkit-line-clamp: initial;
  }
}

@keyframes close {
  from {
    line-clamp: initial;
    -webkit-line-clamp: initial;
  }
  to {
    line-clamp: 3;
    -webkit-line-clamp: 3;
  }
}

.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 12px 0;
  animation: close 0.1s linear 0.1s forwards;
}
.open .text {
  animation: open 0.1s linear 0s forwards;
}

/* Irrelavant css... */
.arrow {
  border: solid #000;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.open .arrow {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-top: 5px;
}

button {
  background: transparent;
  border: 2px solid #000;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

<div class="box">
  <div class="top">
   <h1>Lorem Ipsum</h1>
    </div>
   <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida.
   </p>
    <button><i class="arrow"></i></button>
</div>

标签： javascripthtmlcssanimation