在等待一段动态时间后添加课程

我希望模糊一个元素，然后给它一个display: none的样式，将它从文档中完全删除。下面的代码无法正常工作：我认为setTimeout函数执行得太快。在等待一段动态时间后添加课程

我怎么可能会改变我的代码，以使updateClassAndRemove功能duration参数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>

来源

2017-05-15 ngwazi

你需要把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>

来源

2017-05-15 22:40:15

这是一个很好的答案，但我发现我有错的语法。这是更清洁'setTimeout（removeElement，duration * 1000，element）; '我不知道如何传递这样的参数。更新你的答案？ https://jsfiddle.net/w0wueccv/ – ngwazi

@ngwazi当然，那是为什么你选择不接受我的答案？这只是写它的另一种方式。如果您更喜欢使用作为第三个参数传递的var进行编写，那么您是否可以编辑我的帖子，然后我会接受它？ –

编辑并接受。谢谢。请接受编辑。 – ngwazi

在等待一段动态时间后添加课程

回答

相关问题