文章/答案/技术大牛

发布

问CSS动画在JS中未清除
EN

Stack Overflow用户

提问于 2020-11-18 19:33:07

回答 2查看 39关注 0票数 0

我正在写一个数字时钟，我想创建一个功能，使数字在变化时向上滑动。我将内联动画应用于secondDiv，并每秒清除它，但动画仅在页面加载时显示。我希望它每秒都能显示出来，因此我想先清除它。我试过secondDiv.removeAttribute('style')和secondDiv.style.animation = ""，但都没有用。

Codepen Example

const clock = document.querySelector("#clock-body");
const hourDiv = document.querySelector("#hours");
const minuteDiv = document.querySelector("#minutes");
const secondDiv = document.querySelector("#seconds");
const zone = document.querySelector("#zone");

const getDate = () => {
  let date = new Date();
  let hours = date.getHours();
  let minutes = date.getMinutes();
  let seconds = date.getSeconds();

  if (hours > 12) {
    hours = hours - 12;
  }
  if (minutes < 10) {
    minutes = `0${minutes}`;
  }

  if (seconds < 10) {
    seconds = `0${seconds}`;
  }
  hourDiv.textContent = hours;
  minuteDiv.textContent = minutes;
  secondDiv.textContent = seconds;

  secondDiv.style.animation = `0.3s change`;
};

window.setInterval(getDate, 1000);

CSS

@keyframes change {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-30px);
  }
}

我做错了什么？在再次应用内联动画之前，我如何每秒清除它？

javascript

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-11-18 19:53:11

在animationend事件的帮助下，在动画结束后立即移除样式。而不需要等待下一个循环。

而不是：secondDiv.removeAttribute("style");

使用

secondDiv.addEventListener('animationend', () => {
    secondDiv.removeAttribute("style");
});

在您的getDate函数之外

完整示例

const clock = document.querySelector("#clock-body");
const hourDiv = document.querySelector("#hours");
const minuteDiv = document.querySelector("#minutes");
const secondDiv = document.querySelector("#seconds");
const zone = document.querySelector("#zone");

const getDate = () => {
    
    
    let date = new Date();
    let hours = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();

    if (hours > 12) {
        hours = hours - 12;
    }
    if (minutes < 10) {
        minutes = `0${minutes}`;
    }

    if (seconds < 10) {
        seconds = `0${seconds}`;
    }
    hourDiv.textContent = hours;
    minuteDiv.textContent = minutes;
    secondDiv.textContent = seconds;
    
    secondDiv.style.animation = `0.3s change`;

    
};

secondDiv.addEventListener('animationend', () => {
    secondDiv.removeAttribute("style");
});

window.setInterval(getDate, 1000);

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(#444, #222);
    height: 100vh;
    color: #fff;
}

#clock-body {
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-family: "Courier New", Courier, monospace;
    padding: 2.5rem;
    border: 10px solid #fff;
    border-radius: 20px;
    background: #000;
    box-shadow: 0 8px 30px #212121;

    span {
        font-weight: 300;
        font-size: 3rem;
    }

    #hours,
    #minutes,
    #seconds {
        font-weight: 700;
        font-size: 4rem;
        border-radius: 3px;
    }
}

@keyframes change {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-30px);
    }
}

<div id="clock-body">
    <div id="hours"></div>
    <span>:</span>
    <div id="minutes"></div>
    <span>:</span>
    <div id="seconds"></div>
    <div id="zone"></div>

</div>

票数 3

Stack Overflow用户

发布于 2020-11-18 20:03:15

这是我的解决方案，它不是完美的，但它可以是一个很好的起点。

我在函数中使用setTimeout和css的transition属性来控制数字的位置和不透明度

const clock = document.querySelector("#clock-body");
const hourDiv = document.querySelector("#hours");
const minuteDiv = document.querySelector("#minutes");
const secondDiv = document.querySelector("#seconds");
const zone = document.querySelector("#zone");

const getDate = () => {
  // secondDiv.removeAttribute("style");
  secondDiv.style.transition = `opacity 0.3s linear`;
  secondDiv.style.transform = `translateY(0px)`;
  secondDiv.style.opacity = `1`;
  let date = new Date();
  let hours = date.getHours();
  let minutes = date.getMinutes();
  let seconds = date.getSeconds();

  if (hours > 12) {
    hours = hours - 12;
  }
  if (minutes < 10) {
    minutes = `0${minutes}`;
  }

  if (seconds < 10) {
    seconds = `0${seconds}`;
  }
  hourDiv.textContent = hours;
  minuteDiv.textContent = minutes;
  secondDiv.textContent = seconds;

  setTimeout(() => {
    secondDiv.style.transition = `all 0.3s linear`;
    secondDiv.style.transform = `translateY(-50px)`;
    secondDiv.style.opacity = `0`;
  }, 500);
};

window.setInterval(getDate, 1000);

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(#444, #222);
  height: 100vh;
  color: #fff;
}

#clock-body {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-family: "Courier New", Courier, monospace;
  padding: 2.5rem;
  border: 10px solid #fff;
  border-radius: 20px;
  background: #000;
  box-shadow: 0 8px 30px #212121;
}

#clock-body span {
  font-weight: 300;
  font-size: 3rem;
}

#clock-body #hours,
#clock-body #minutes,
#clock-body #seconds {
  font-weight: 700;
  font-size: 4rem;
  border-radius: 3px;
}

@keyframes change {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-30px);
  }
}

<div id="clock-body">
  <div id="hours"></div>
  <span>:</span>
  <div id="minutes"></div>
  <span>:</span>
  <div class="s-div" id="seconds"></div>
  <div id="zone"></div>

</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64892255

复制

相似问题

问CSS动画在JS中未清除
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS动画在JS中未清除EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS动画在JS中未清除
EN