等待动态时间后添加 class

Question

我希望模糊一个元素然后给它一个 display: none 的样式来将它从文档中完全删除。下面的代码无法正常工作：我认为 setTimeout 函数执行得太快了。

我如何更改我的代码以允许 updateClassAndRemove 函数的 duration 参数向动画添加 duration 秒并向 [=15] 添加相同的秒数=] 按预期运行？

// \\\\\\\\\\\\\\\\\ INTIAL /////////////////////////////// //
'use strict';

// \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ REMOVE ELEMENT / / / / / / / / / / / / ///
function removeElement( element ){
  element.classList.add( 'dsp-none');
}
// / / / / / / / / / / / / / / / / / REMOVE ELEMENT \ \ \ \ \ \ \ \ \ \ \ \ \\

// \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ UPDATE CLASS AND REMOVE / / / / / / / / / / //
function updateClassAndRemove( element, classString, duration ){
  element.style.animationDuration = duration + 's';
  element.classList.add( classString );
// The below line appears to hide the element too fast
//  setTimeout ( removeElement( element ), duration * 1000 ); 
}
// / / / / / / / / / / / / / / / UPDATE CLASS AND REMOVE / / / / / / / / / / //

// \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ START / / / / / / / / / / / / / / / //
function start(){
  var element = document.getElementById( 'paragraph' );
  updateClassAndRemove( element, 'blur', 10 );
}
// / / / / / / / / / / / / / / / / / / / START \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \

start();

/* \\\\\\\\\\\\\\\\\ INITIAL /////////////////////////////// */
.dsp-none {
  display: none;
}

/* \ \ \ \ \ \ \ \ \ \ \ \ \ ANIMATION DEFINITIONS / / / / / / / / / / / / / */
.animation {
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}
.blur {
  animation-name: blur;
}

/*\ \ \ \ \ \ \ \ \ \ \ \ \ \ ANIMATION KEYFRAMES / / / / / / / / / / / / / /*/
@keyframes blur {
  100% {
    filter: blur( 1rem );
  }
}

<p id="paragraph" class="animation">Blur this, then remove display.</p>

Answer 1

您需要将 removeElement() 放在 setTimeout

的函数中

// \\\\\\\\\\\\\\\\\ INTIAL /////////////////////////////// //
'use strict';

// \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ REMOVE ELEMENT / / / / / / / / / / / / ///
function removeElement( element ){
  element.classList.add( 'dsp-none');
}
// / / / / / / / / / / / / / / / / / REMOVE ELEMENT \ \ \ \ \ \ \ \ \ \ \ \ \\

// \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ UPDATE CLASS AND REMOVE / / / / / / / / / / //
function updateClassAndRemove( element, classString, duration ){
  element.style.animationDuration = duration + 's';
  element.classList.add( classString );
  setTimeout(function() {
    removeElement( element );
  }, duration * 1000);
}
// / / / / / / / / / / / / / / / UPDATE CLASS AND REMOVE / / / / / / / / / / //

// \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ START / / / / / / / / / / / / / / / //
function start(){
  var element = document.getElementById( 'paragraph' );
  updateClassAndRemove( element, 'blur', 10 );
}
// / / / / / / / / / / / / / / / / / / / START \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \

start();

/* \\\\\\\\\\\\\\\\\ INITIAL /////////////////////////////// */
.dsp-none {
  display: none;
}

/* \ \ \ \ \ \ \ \ \ \ \ \ \ ANIMATION DEFINITIONS / / / / / / / / / / / / / */
.animation {
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}
.blur {
  animation-name: blur;
}

/*\ \ \ \ \ \ \ \ \ \ \ \ \ \ ANIMATION KEYFRAMES / / / / / / / / / / / / / /*/
@keyframes blur {
  100% {
    filter: blur( 1rem );
  }
}

<p id="paragraph" class="animation">Blur this, then remove display.</p>

注：一种调用setTimeout的方式，代码更少： setTimeout ( removeElement, duration * 1000, element );

或者您可以使用 animationend 事件。

// \\\\\\\\\\\\\\\\\ INTIAL /////////////////////////////// //
'use strict';

// \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ REMOVE ELEMENT / / / / / / / / / / / / ///
function removeElement( element ){
  element.classList.add( 'dsp-none');
}
// / / / / / / / / / / / / / / / / / REMOVE ELEMENT \ \ \ \ \ \ \ \ \ \ \ \ \\

// \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ UPDATE CLASS AND REMOVE / / / / / / / / / / //
function updateClassAndRemove( element, classString, duration ){
  element.style.animationDuration = duration + 's';
  element.addEventListener('animationend',function() {
    removeElement( element );
  })
  element.classList.add( classString );
}
// / / / / / / / / / / / / / / / UPDATE CLASS AND REMOVE / / / / / / / / / / //

// \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ START / / / / / / / / / / / / / / / //
function start(){
  var element = document.getElementById( 'paragraph' );
  updateClassAndRemove( element, 'blur', 10 );
}
// / / / / / / / / / / / / / / / / / / / START \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \

start();

/* \\\\\\\\\\\\\\\\\ INITIAL /////////////////////////////// */
.dsp-none {
  display: none;
}

/* \ \ \ \ \ \ \ \ \ \ \ \ \ ANIMATION DEFINITIONS / / / / / / / / / / / / / */
.animation {
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}
.blur {
  animation-name: blur;
}

/*\ \ \ \ \ \ \ \ \ \ \ \ \ \ ANIMATION KEYFRAMES / / / / / / / / / / / / / /*/
@keyframes blur {
  100% {
    filter: blur( 1rem );
  }
}

<p id="paragraph" class="animation">Blur this, then remove display.</p>

等待动态时间后添加 class

Add class after waiting a dynamic amount of time

javascript

css

animation

hide

show-hide