如何防止元素回到初始状态？

Posted 2023-03-04

【中文标题】如何防止元素回到初始状态？

【英文标题】：How to prevent elements going back to their initial state?

【发布时间】：2022-01-19 20:09:57

【问题描述】：

我正在学习动画，我想制作一个两步动画：1. 元素掉落 2. 点击时它们开始跳动。 不幸的是，点击后元素会回到它们的初始位置（在下降动画之前）。我究竟做错了什么？ 下面是 Codepen 中的一个示例： https://codepen.io/ju-rat/pen/VwMbZVL?editors=1010

代码如下：

function pulsation() 
  var elem = document.getElementsByClassName("bulb");
  elem[0].style.animation = "pulse 0.5s linear infinite 0s alternate";
  elem[1].style.animation = "pulse 1s linear infinite 2s alternate";
  elem[2].style.animation = "pulse 0.5s linear infinite 0s alternate";
  elem[3].style.animation = "pulse 1s linear infinite 2s alternate";

html 
  background-color: rgba(171, 183, 183);


* 
  margin: 10px;


#container 
  width: 100%;
  display: flex;


#b1 
  height: 50px;
  width: 50px;
  border-radius: 100%;
  background-color: red;


#b2 
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: yellow;
  filter: none;


#b3 
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: green;
  filter: none;


#b4 
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: blue;
  filter: none;


#b2 
  animation: fall2 1s ease-out;
  animation-delay: 0s;
  animation-fill-mode: forwards;


@keyframes fall2 
  0% 
    transform: translateY(0%);
  
  100% 
    transform: translateY(400%);
  


#b3 
  animation: fall 2s ease-out;
  animation-delay: 1s;
  animation-fill-mode: forwards;


@keyframes fall 
  0% 
    transform: translateY(0%);
  
  100% 
    transform: translateY(400%) translateX(100%);
  


@keyframes pulse 
  0% 
    filter: none;
  
  50% 
    filter: brightness(80%) drop-shadow(0px 1px 14px rgba(224, 231, 34));
  
  100% 
    filter: brightness(140%) drop-shadow(0px 1px 14px rgba(251, 255, 255));
  

<div id=c ontainer>
  <div class="bulb" id="b1" onclick="pulsation()"></div>
  <div class="bulb" id="b2"></div>
  <div class="bulb" id="b3"></div>
  <div class="bulb" id="b4"></div>
</div>
<p>Click on the red circle</p>

【问题讨论】：

感谢 Jeremy Tille :) ***.com/a/70384280/15040447

【参考方案1】：

您用pulse 0.5s linear 覆盖fall 2s ease-out，因此，与fall 相关的所有内容都会丢失。

据我所知，没有办法将两种效果（脉冲和下降）结合在一个 CSS 动画中。这是一个或另一个，但我可能在这里错了。至少，您可以作弊并在每个灯泡内放置一个子元素，并对其应用脉冲效果而不是灯泡本身：

function pulsation() 
  var elem = document.getElementsByClassName("bulb");
  elem[0].children[0].style.animation = "pulse 0.5s linear infinite 0s alternate";
  elem[1].children[0].style.animation = "pulse 1s linear infinite 2s alternate";
  elem[2].children[0].style.animation = "pulse 0.5s linear infinite 0s alternate";
  elem[3].children[0].style.animation = "pulse 1s linear infinite 2s alternate";

html 
  background-color: rgba(171, 183, 183);


* 
  margin: 10px;


#container 
  width: 100%;
  display: flex;


.bulb 
  position: relative;
  height: 50px;
  width: 50px;
  border-radius: 50%;


#b1 
  background-color: red;


#b2 
  background-color: yellow;
  filter: none;
  animation: fall2 1s ease-out;
  animation-delay: 0s;
  animation-fill-mode: forwards;


#b3 
  background-color: green;
  filter: none;
  animation: fall 2s ease-out;
  animation-delay: 1s;
  animation-fill-mode: forwards;


#b4 
  background-color: blue;
  filter: none;


.inner 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
  border-radius: 50%;
  margin: 0;


@keyframes fall2 
  0% 
    transform: translateY(0%);
  
  100% 
    transform: translateY(400%);
  


@keyframes fall 
  0% 
    transform: translateY(0%);
  
  100% 
    transform: translateY(400%) translateX(100%);
  


@keyframes pulse 
  0% 
    filter: none;
  
  50% 
    filter: brightness(80%) drop-shadow(0px 1px 14px rgba(224, 231, 34));
  
  100% 
    filter: brightness(140%) drop-shadow(0px 1px 14px rgba(251, 255, 255));
  

<div id=c ontainer>
  <div class="bulb" id="b1" onclick="pulsation()">
    <div class="inner"></div>
  </div>
  <div class="bulb" id="b2">
    <div class="inner"></div>
  </div>
  <div class="bulb" id="b3">
    <div class="inner"></div>
  </div>
  <div class="bulb" id="b4">
    <div class="inner"></div>
  </div>
</div>
<p>Click on the red circle</p>

（注意：我还清理了你的 CSS，减少了重复等）

【讨论】：

谢谢你，Jeremy Tille，你的回答是正确的，非常有帮助！现在一切正常。我不知道孩子。谢谢。

不错！如果它解决了您的问题，请不要忘记将答案标记为已接受

【参考方案2】：

您好像忘记添加transform: translateY(400%) translateX(100%); 进入这里的脉动动画

function pulsation() 
  var elem = document.getElementsByClassName("bulb");
  elem[0].style.animation = "pulse 0.5s linear infinite 0s alternate";
  elem[1].style.animation = "pulse 1s linear infinite 2s alternate";
  elem[2].style.animation = "pulse 0.5s linear infinite 0s alternate";
  elem[3].style.animation = "pulse 1s linear infinite 2s alternate";

html 
  background-color: rgba(171, 183, 183);


* 
  margin: 10px;


#container 
  width: 100%;
  display: flex;


#b1 
  height: 50px;
  width: 50px;
  border-radius: 100%;
  background-color: red;


#b2 
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: yellow;
  filter: none;


#b3 
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: green;
  filter: none;
  


#b4 
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: blue;
  filter: none;


#b2 
  animation: fall2 1s ease-out;
  animation-delay: 0s;
  animation-fill-mode: forwards;


@keyframes fall2 
  0% 
    transform: translateY(0%);
  
  100% 
    transform: translateY(400%);
  


#b3 
  animation: fall 2s ease-out;
  animation-delay: 1s;
  animation-fill-mode: forwards;


@keyframes fall 
  0% 
    transform: translateY(0%);
  
  100% 
    transform: translateY(400%) translateX(100%);
  


@keyframes pulse 
  0% 
    filter: none;
    transform: translateY(400%) translateX(100%);
  
  50% 
    filter: brightness(80%) drop-shadow(0px 1px 14px rgba(224, 231, 34));
    transform: translateY(400%) translateX(100%);
  
  100% 
    filter: brightness(140%) drop-shadow(0px 1px 14px rgba(251, 255, 255));
    transform: translateY(400%) translateX(100%);
  

<div id=c ontainer>
  <div class="bulb" id="b1" onclick="pulsation()"></div>
  <div class="bulb" id="b2"></div>
  <div class="bulb" id="b3"></div>
  <div class="bulb" id="b4"></div>
</div>
<p>Click on the red circle</p>