添加类后向delay内容添加延迟
添加类后向delay内容添加延迟
提问于 2016-04-08 03:27:24
我有这个密码
function handleButtonClick(){
var bubbleClick = document.querySelector('.card-3--closed').addEventListener("click", bubbleFunction);
function bubbleFunction() {
$( ".card-3--closed" ).addClass( "card-3" );
$( ".card-3" ).removeClass( "card-3--closed" );
}
};我希望在从类“卡-3”到“卡-3”的转换发生后，显示类“卡-3”中的元素。因此，我基本上是试图在动画发生后延迟显示内容，如果这有意义的话。不确定如何在上面的代码中实现延迟
<div class="box card-3--closed">
<section class="content content-display">
<h1>Register</h1>
<span class="input">
<input class="input__field input__field_open" type="text" id="input-4" />
<label class="input__label input__label_open input__label-color-1 input__field_open" for="input-4">
<span class="input__label-content input__label-content">username</span>
</label>
</span>
<span class="input">
<input class="input__field input__field_open" type="password" id="input-5" />
<label class="input__label input__label_open input__label-color-1 input__field_open" for="input-5">
<span class="input__label-content input__label-content">password</span>
</label>
</span>
<span class="input">
<input class="input__field input__field_open" type="password" id="input-5" />
<label class="input__label input__label_open input__label-color-1 input__field_open" for="input-5">
<span class="input__label-content input__label-content">Repeat Password</span>
</label>
</span>
<button class="progress-button progress-button_open" data-style="fill" data-horizontal>NEXT</button>
</span>
</section>
</div>和css
.card-3 {
display: block;
top: 3em;
left: 33.5%;
/*left: 17%;*/
background: #ED2553;
-webkit-box-shadow: 0px 2px 27px -8px rgba(85,85,85,1);
-moz-box-shadow: 0px 2px 27px -8px rgba(85,85,85,1);
box-shadow: 0px 2px 27px -8px rgba(85,85,85,1);
-ms-transform: scale(1,1); /* IE 9 */
-webkit-transform: scale(1,1); /* Safari */
transform: scale(1,1); /* Standard syntax */
transition: 0.6s;
}
.card-3--closed {
width: 2em;
height: 2em;
top: 8em;
left: 65%;
background: #ED2553;
border-radius: 100%;
}
.card-3--closed section {
visibility: hidden;
transition: .5s;
}
.card-3 section {
transition-delay: 0.5s;
visibility: visible;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2016-04-08 04:53:03
要在Javascript中添加延迟，可以使用window.setTimeout() (在大多数情况下是“窗口”)。是可选的)作为第一个参数传递给setTimeout的回调函数将在超时之后执行，超时以毫秒为单位作为第二个参数传递。
$( ".card-3--closed" ).addClass( "card-3" );
window.setTimeout(
function(){
$( ".card-3" ).removeClass( "card-3--closed" );
},
600
);我还想知道类卡是否会有多个元素--3-关闭的还是牌-3的，因为它是类而不是ID。如果是的话，你必须只处理被点击的元素。
Stack Overflow用户
发布于 2016-04-08 04:45:25
$(".card-3--closed").bind("transitionend webkitTransitionEndoTransitionEnd MSTransitionEnd", function(){
setTimeout(function(){
console.log("you can add delay here")
$( ".card-3" ).removeClass( "card-3--closed" );
}, 3000);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36490994
复制相关文章
相似问题
腾讯云开发者
