Question

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

如何更改我的代码以允许duration函数的updateClassAndRemove参数向动画添加duration秒，并向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 );
// 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

中的函数内

＆＃13;

// \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 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();

＆＃13;

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 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 );
  }
}

＆＃13;

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

＆＃13;

注意：使用较少代码调用setTimeout的方法： setTimeout ( removeElement, duration * 1000, element );

或者您可以使用animationend事件。

＆＃13;

// \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 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();

＆＃13;

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 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 );
  }
}

＆＃13;

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

＆＃13;

等待一段动态后添加类

1 个答案: