元素在完成后继续动画并返回。

huangapple go评论91阅读模式
英文:

Element animates and keeps returning after completion

问题

以下是翻译好的部分:

我有一个元素,它是一个登录按钮,它淡入,然后我应用一些JavaScript来在点击时将动画更改为淡出。但是一旦淡出完成,元素再次出现,即使我已经向元素添加了一个hidden类,所以它应该保持隐藏。

这是我设置的方式:

  1. <div id="login">登录到网站</div>
  1. .hidden {
  2. display: none;
  3. }
  4. #login {
  5. /* ... 省略其他样式 ... */
  6. animation: anim-show .5s ease;
  7. }
  1. const login = document.getElementById('login');
  2. login.addEventListener('animationend', onComplete);
  3. function onComplete(event) {
  4. if (event.animationName == "anim-show") {
  5. login.addEventListener('click', onClick);
  6. } else if (event == "anim-hide") {
  7. login.classList.add("hidden");
  8. }
  9. }
  10. function onClick() {
  11. login.style.animationName = "anim-hide";
  12. login.removeEventListener('click', onClick);
  13. }

一旦anim-hide动画完成,就会应用hidden类,所以它应该保持隐藏。但是元素仍然出现在页面上。
我本以为它至少会保持不透明度为0,但显然这并没有发生,我不知道为什么。

英文:

I have an element which is a login button, it fades in, then i apply some JavaScript to change the animation to a fade out when it is clicked. But once the fade out is complete the element appears again even though i added a hidden class to the element so it should remain hidden.

This is how i have it setup:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const login = document.getElementById(&#39;login&#39;);
  2. login.addEventListener(&#39;animationend&#39;, onComplete);
  3. function onComplete(event) {
  4. if (event.animationName == &quot;anim-show&quot;) {
  5. login.addEventListener(&#39;click&#39;, onClick);
  6. } else if (event == &quot;anim-hide&quot;) {
  7. login.classList.add(&quot;hidden&quot;);
  8. }
  9. }
  10. function onClick() {
  11. login.style.animationName = &quot;anim-hide&quot;;
  12. login.removeEventListener(&#39;click&#39;, onClick);
  13. }

<!-- language: lang-css -->

  1. .hidden {
  2. display: none;
  3. }
  4. #login {
  5. min-width: 150px;
  6. min-height: 10px;
  7. width: fit-content;
  8. height: fit-content;
  9. padding: 2px;
  10. background-color: #466995;
  11. border-radius: 1px;
  12. border-width: 2px;
  13. border-style: solid;
  14. border-color: #ffffff;
  15. font-size: 15px;
  16. text-align: center;
  17. padding: 10px;
  18. animation: anim-show .5s ease;
  19. user-select: none;
  20. }
  21. @keyframes anim-show {
  22. from {
  23. margin-bottom: 25%;
  24. opacity: 0;
  25. }
  26. to {
  27. margin-bottom: 0%;
  28. opacity: 1;
  29. }
  30. }
  31. @keyframes anim-hide {
  32. from {
  33. margin-top: 0%;
  34. opacity: 1;
  35. }
  36. to {
  37. margin-top: 25%;
  38. opacity: 0;
  39. }
  40. }

<!-- language: lang-html -->

  1. &lt;div id=&quot;login&quot;&gt;Login To Website&lt;/div&gt;

<!-- end snippet -->

Once the anim-hide animation completes, the hidden class is applied so it should remain hidden. Yet the element still appears on the page.
I would have thought it would at least remain with an opacity of 0 but apparently that isn't happening and i do not know why.

答案1

得分: 0

[只翻译代码部分]

  1. animation-fill-mode: forwards; /* 只有这部分 */
  1. #login {
  2. min-width: 150px;
  3. min-height: 10px;
  4. width: fit-content;
  5. height: fit-content;
  6. padding: 2px;
  7. background-color: #466995;
  8. border-radius: 1px;
  9. border-width: 2px;
  10. border-style: solid;
  11. border-color: #ffffff;
  12. font-size: 15px;
  13. text-align: center;
  14. padding: 10px;
  15. animation: anim-show .5s ease;
  16. user-select: none;
  17. animation-fill-mode: forwards; /* 只有这部分 */
  18. }
英文:

with a little effort you could have found this on your own...

  1. animation-fill-mode : forwards;

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const login = document.getElementById(&#39;login&#39;);
  2. login.addEventListener(&#39;click&#39;, onClick);
  3. function onClick() {
  4. login.style.animationName = &quot;anim-hide&quot;;
  5. login.removeEventListener(&#39;click&#39;, onClick);
  6. }

<!-- language: lang-css -->

  1. #login {
  2. min-width: 150px;
  3. min-height: 10px;
  4. width: fit-content;
  5. height: fit-content;
  6. padding: 2px;
  7. background-color: #466995;
  8. border-radius: 1px;
  9. border-width: 2px;
  10. border-style: solid;
  11. border-color: #ffffff;
  12. font-size: 15px;
  13. text-align: center;
  14. padding: 10px;
  15. animation: anim-show .5s ease;
  16. user-select: none;
  17. animation-fill-mode: forwards; /* just this */
  18. }
  19. @keyframes anim-hide {
  20. from {
  21. margin-top: 0%;
  22. opacity: 1;
  23. }
  24. to {
  25. margin-top: 25%;
  26. opacity: 0;
  27. }
  28. }
  29. @keyframes anim-show {
  30. from {
  31. margin-bottom: 25%;
  32. opacity: 0;
  33. }
  34. to {
  35. margin-bottom: 0%;
  36. opacity: 1;
  37. }
  38. }

<!-- language: lang-html -->

  1. &lt;div id=&quot;login&quot;&gt;Login To Website&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年8月4日 01:41:50
  • 转载请务必保留本文链接:https://go.coder-hub.com/76830442.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定