那些遇到过的问题

更快地完成 CSS 动画

Boo*_*aar 5 html javascript css

我有一个带有 CSS 关键帧动画的沙漏 CSS 元素。动画的工作时间是无限的；在每次迭代结束时，它都会旋转到起始位置并继续工作。

我需要在单击按钮时重新启动动画。但不是立即重新启动，而是以非常快的速度加速到启动位置，然后再次开始正常工作。

我尝试单击以更改动画持续时间迭代计数的样式，但动画立即停止。结束动画事件使其正常工作，但它从最后一个位置开始。

const hourglass = document.querySelector(".hourglass")
const before = document.querySelector(".before")
const after = document.querySelector(".after")

const button = document.querySelector('button');

const handleClick = ()=>{
    hourglass.style.animationDuration = '1s';
  hourglass.style.animationIterationCount = 1
  
    before.style.animationDuration = '1s';
  before.style.animationIterationCount = 1
  
    after.style.animationDuration = '1s';
  after.style.animationIterationCount = 1
}

button.addEventListener('click',handleClick);

  hourglass.addEventListener('animationend', (event) => {
    setTimeout(()=>{
        hourglass.style.animationDuration = '8s';
  hourglass.style.animationIterationCount = "infinite";
  
    before.style.animationDuration = '8s';
  before.style.animationIterationCount = "infinite";
  
    after.style.animationDuration = '8s';
  after.style.animationIterationCount = "infinite";
    },1000)
    
  });
Run Code Online (Sandbox Code Playgroud) 
*
{
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root
{
  --bg:#e3e4e8;
  --fg:#2e3138;
  --primary:#255ff4;
  font-size: calc(16px + (24 - 16) *(100vw - 320px) / (1280 - 320));
}
body
{
  display: grid;
  font:1em/1.5 sans-serif;
  height: 100vh;
  place-items:center;
}
.hourglass, .hourglass .before, .hourglass .after
{
  animation-duration: 4s;
  animation-iteration-count: infinite; 
}

.hourglass {
  --polygonH: polygon(0% 0%,100% 0%,100% 5.55%,95% 5.55%,95% 28%,60%
   46%,60% 54%,95% 72%,95% 94.45%,100% 94.45%,100% 100%,0% 100%,0% 94.45%,5% 94.45%,5% 72%,40% 54%,40% 46%,5% 28%,5% 5.55%,0% 5.55%);
  animation-name: flip;
  animation-timing-function: ease-in-out;
  background-image: linear-gradient(var(--primary) 0.5em, #737a8c55 0.5em 8.5em, var(--primary) 8.5em);
  clip-path: var(--polygonH);
  -webkit-clip-path: var(--polygonH);
  overflow: hidden;
  position: relative;
  width: 5em;
  height: 9em;
  z-index: 0;
}
.hourglass .before, .hourglass .after
{
  animation-timing-function: linear;
  content: "";
  display: block;
  position: absolute;
}
.hourglass .before {
  --polygonB1: polygon(0% 0%,100% 0%,100% 24%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,0% 24%);
  --polygonB2: polygon(0% 4%,100% 4%,100% 24%,55% 45%,55% 100%,55% 100%,55% 100%,45% 100%,45% 100%,45% 100%,45% 45%,0% 24%);
  --polygonB3: polygon(0% 24%,100% 24%,100% 24%,55% 45%,55% 80%,100% 100%,100% 100%,0% 100%,0% 100%,45% 80%,45% 45%,0% 24%);
  --polygonB4: polygon(45% 45%,55% 45%,55% 45%,55% 45%,55% 58%,100% 76%,100% 100%,0% 100%,0% 76%,45% 58%,45% 45%,45% 45%);
  --polygonB5: polygon(50% 53%,50% 53%,50% 53%,50% 53%,50% 53%,100% 76%,100% 100%,0% 100%,0% 76%,50% 53%,50% 53%,50% 53%);
  animation-name: fill;
  background: var(--fg);
  background-size: 100% 3.6em;
  clip-path: var(--polygonB1);
  top: 0.5em;
  left: 0.5em;
  width: 4em;
  height: 8em;
  z-index: 1;
}
.hourglass .after {
  animation-name: glare;
  background:
    linear-gradient(90deg,#0000 0.5em,#0003 0.5em 1.5em,#0000 1.5em 3.5em,#fff3 3.5em 4.5em,#fff0 4.5em 6.5em,#0003 6.5em 7.5em,#0000 7.5em) 0 0 / 100% 0.5em,
    linear-gradient(90deg,#0000 0.75em,#0003 0.75em 1.25em,#0000 1.25em 3.75em,#fff3 3.75em 4.25em,#fff0 4.25em 6.75em,#0003 6.75em 7.25em,#0000 7.25em) 0 0.5em / 100% 8em,
    linear-gradient(90deg,#0000 0.5em,#0003 0.5em 1.5em,#0000 1.5em 3.5em,#fff3 3.5em 4.5em,#fff0 4.5em 6.5em,#0003 6.5em 7.5em,#0000 7.5em) 0 100% / 100% 0.5em;
    background-repeat: repeat-x;
    top: 0;
    left: -3em;
    width: 200%;
    height: 100%;
    z-index: 2;
  }
  @keyframes fill{
    from{
      clip-path: var(--polygonB1);
      -webkit-clip-path:var(--polygonB1);
    }
    10%{
      clip-path: var(--polygonB2);
      -webkit-clip-path:var(--polygonB2);
    }
    45%{
      clip-path: var(--polygonB3);
      -webkit-clip-path:var(--polygonB3);
    }
    80%{
      clip-path: var(--polygonB4);
      -webkit-clip-path:var(--polygonB4);
    }
    85%, to{
      clip-path: var(--polygonB5);
      -webkit-clip-path:var(--polygonB5);
    }
  }
  @keyframes glare{
    from, 90%
    {
      transform: translateX(0);
    }
    to
    {
      transform: translateX(3em);
    }
  }
  @keyframes flip{
    from, 90%
    {
      transform: rotate(0);
    }
    to{
      transform: rotate(180deg);
    }
  }
  
  
  button{
    padding: 5px 15px;
    border: 1px solid gray;
  }
Run Code Online (Sandbox Code Playgroud) 
<div class="hourglass">
  <div class="before"></div>
  <div class="after"></div>
</div>

<button >Click</button>
Run Code Online (Sandbox Code Playgroud)

Nem*_*912 2

您的解决方案问题是，当您更改动画的持续时间时，如果休息时间低于新的持续时间，它将立即停止。因此，我激活并删除动画并在 JavaScript 中启动它，并在启动时花费一些时间。我们不需要在初始时执行此操作，因为我们可以使用事件侦听器 oneventstart，但在每次其他迭代中，我们都需要执行此操作，因此我只需重用该代码片段即可创建一个新代码。

单击时，我记录那一刻的时间并将其与开始时间进行比较。该时间意味着动画在那一刻之前运行了多长时间。再加上 250 毫秒，动画将在这段时间内完成。

之后，我们需要再次重置动画，这样它就会从头开始，而不是从旧的位置开始。

const hourglass = document.querySelector(".hourglass");
const before = document.querySelector(".before");
const after = document.querySelector(".after");

const button = document.querySelector("button");

// Initial
const resetAnimation = () => {
  hourglass.style.animationName = "none";
  before.style.animationName = "none";
  after.style.animationName = "none";
};

resetAnimation();

let time;
let disableClick = false;

const activeAnimation = () => {
  disableClick = false;

  const speed = "8000ms";
  time = +new Date();

  hourglass.style.animationName = "";
  before.style.animationName = "";
  after.style.animationName = "";

  hourglass.style.animationDuration = speed;
  before.style.animationDuration = speed;
  after.style.animationDuration = speed;
};

activeAnimation();

const handleClick = () => {
  if (disableClick) return;

  disableClick = true;

  const newTime = +new Date();

  const speed = newTime - time + 250;

  hourglass.style.animationDuration = speed + "ms";
  before.style.animationDuration = speed + "ms";
  after.style.animationDuration = speed + "ms";
};

button.addEventListener("click", handleClick);

hourglass.addEventListener("animationiteration", (event) => {
  resetAnimation();

  setTimeout(() => {
    activeAnimation();
  }, 100);
});
Run Code Online (Sandbox Code Playgroud) 
* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --bg: #e3e4e8;
  --fg: #2e3138;
  --primary: #255ff4;
  font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}
body {
  display: grid;
  font: 1em/1.5 sans-serif;
  height: 100vh;
  place-items: center;
}
.hourglass,
.hourglass .before,
.hourglass .after {
  animation-duration: 8000ms;
  animation-iteration-count: infinite;
}

.hourglass {
  --polygonH: polygon(
    0% 0%,
    100% 0%,
    100% 5.55%,
    95% 5.55%,
    95% 28%,
    60% 46%,
    60% 54%,
    95% 72%,
    95% 94.45%,
    100% 94.45%,
    100% 100%,
    0% 100%,
    0% 94.45%,
    5% 94.45%,
    5% 72%,
    40% 54%,
    40% 46%,
    5% 28%,
    5% 5.55%,
    0% 5.55%
  );
  animation-name: flip;
  animation-timing-function: ease-in-out;
  background-image: linear-gradient(
    var(--primary) 0.5em,
    #737a8c55 0.5em 8.5em,
    var(--primary) 8.5em
  );
  clip-path: var(--polygonH);
  -webkit-clip-path: var(--polygonH);
  overflow: hidden;
  position: relative;
  width: 5em;
  height: 9em;
  z-index: 0;
}
.hourglass .before,
.hourglass .after {
  animation-timing-function: linear;
  content: "";
  display: block;
  position: absolute;
}
.hourglass .before {
  --polygonB1: polygon(
    0% 0%,
    100% 0%,
    100% 24%,
    50% 47%,
    50% 47%,
    50% 47%,
    50% 47%,
    50% 47%,
    50% 47%,
    50% 47%,
    50% 47%,
    0% 24%
  );
  --polygonB2: polygon(
    0% 4%,
    100% 4%,
    100% 24%,
    55% 45%,
    55% 100%,
    55% 100%,
    55% 100%,
    45% 100%,
    45% 100%,
    45% 100%,
    45% 45%,
    0% 24%
  );
  --polygonB3: polygon(
    0% 24%,
    100% 24%,
    100% 24%,
    55% 45%,
    55% 80%,
    100% 100%,
    100% 100%,
    0% 100%,
    0% 100%,
    45% 80%,
    45% 45%,
    0% 24%
  );
  --polygonB4: polygon(
    45% 45%,
    55% 45%,
    55% 45%,
    55% 45%,
    55% 58%,
    100% 76%,
    100% 100%,
    0% 100%,
    0% 76%,
    45% 58%,
    45% 45%,
    45% 45%
  );
  --polygonB5: polygon(
    50% 53%,
    50% 53%,
    50% 53%,
    50% 53%,
    50% 53%,
    100% 76%,
    100% 100%,
    0% 100%,
    0% 76%,
    50% 53%,
    50% 53%,
    50% 53%
  );
  animation-name: fill;
  background: var(--fg);
  background-size: 100% 3.6em;
  clip-path: var(--polygonB1);
  top: 0.5em;
  left: 0.5em;
  width: 4em;
  height: 8em;
  z-index: 1;
}
.hourglass .after {
  animation-name: glare;
  background: linear-gradient(
        90deg,
        #0000 0.5em,
        #0003 0.5em 1.5em,
        #0000 1.5em 3.5em,
        #fff3 3.5em 4.5em,
        #fff0 4.5em 6.5em,
        #0003 6.5em 7.5em,
        #0000 7.5em
      )
      0 0 / 100% 0.5em,
    linear-gradient(
        90deg,
        #0000 0.75em,
        #0003 0.75em 1.25em,
        #0000 1.25em 3.75em,
        #fff3 3.75em 4.25em,
        #fff0 4.25em 6.75em,
        #0003 6.75em 7.25em,
        #0000 7.25em
      )
      0 0.5em / 100% 8em,
    linear-gradient(
        90deg,
        #0000 0.5em,
        #0003 0.5em 1.5em,
        #0000 1.5em 3.5em,
        #fff3 3.5em 4.5em,
        #fff0 4.5em 6.5em,
        #0003 6.5em 7.5em,
        #0000 7.5em
      )
      0 100% / 100% 0.5em;
  background-repeat: repeat-x;
  top: 0;
  left: -3em;
  width: 200%;
  height: 100%;
  z-index: 2;
}
@keyframes fill {
  from {
    clip-path: var(--polygonB1);
    -webkit-clip-path: var(--polygonB1);
  }
  10% {
    clip-path: var(--polygonB2);
    -webkit-clip-path: var(--polygonB2);
  }
  45% {
    clip-path: var(--polygonB3);
    -webkit-clip-path: var(--polygonB3);
  }
  80% {
    clip-path: var(--polygonB4);
    -webkit-clip-path: var(--polygonB4);
  }
  85%,
  to {
    clip-path: var(--polygonB5);
    -webkit-clip-path: var(--polygonB5);
  }
}
@keyframes glare {
  from,
  90% {
    transform: translateX(0);
  }
  to {
    transform: translateX(3em);
  }
}
@keyframes flip {
  from,
  90% {
    transform: rotate(0);
  }
  to {
    transform: rotate(180deg);
  }
}

button {
  padding: 5px 15px;
  border: 1px solid gray;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="hourglass">
      <div class="before"></div>
      <div class="after"></div>
    </div>

    <button>Click</button>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

144 次

最近记录：

3 年，1 月 前
相关归档
Chrome开发人员工具中的人类可读的javascripts 136
如何检查十六进制颜色是否"太黑"？ 100
在承诺解决之前,正在制定指令 59
React:内联有条件地将prop传递给组件 59
你如何轻松创建空矩阵javascript？ 48
Unescape JavaScript的escape()使用C# 46
JavaScript或jQuery"你确定吗？" <A>链接的对话框？ 27
创建CSS以放大复选框 25
使用CSS使表格的外边框颜色与单元格的边框颜色不同 17
CSS:换行符忽略填充？ 17
难疑归档
如何让Git使用我选择的编辑器进行提交？ 2362
在Python中手动引发(抛出)异常 2079
使div填充剩余屏幕空间的高度 1743
什么是智能指针,什么时候应该使用？ 1730
Node.js module.exports的目的是什么,你如何使用它？ 1397
在Python中将整数转换为字符串？ 1282
对JavaScript对象数组进行排序 1233
如何使用jQuery设置/取消设置cookie？ 1209
angular-route和angular-ui-router之间有什么区别？ 1064
用于Python的IDE是什么？ 1028