从隐藏div开始，然后使用Animate.css fadeIn和fadeOut进行切换
从隐藏div开始，然后使用Animate.css fadeIn和fadeOut进行切换
提问于 2018-08-12 06:14:43
我正在尝试使用display: none隐藏一个div，然后使用jQuery通过单击一个按钮从Animation.css切换fadeIn动画。
但是，当我尝试切换动画时，它可以工作，但隐藏它不会播放淡出动画。
下面是一个有效的example
HTML：
<div class="window animated"></div>
<button style="margin: 100px;">Toggle Fade Window</button>CSS:
.window{
background: blue;
width: 200px;
height: 200px;
margin: 20px;
display: none;
}JS:
$(function() {
$("button").click(function() {
$(".window").toggleClass("fadeIn");
})
})谢谢!
回答 1
Stack Overflow用户
发布于 2018-08-12 09:11:46
有一些与您的代码相关的问题，以及您对animate.css库的误解：
- 如果从
fadeIn中删除div，它不会自动淡出，您必须添加类fadeOutin. fadeIn会将元素的opacity从0转换为1，因此在1样式中使用display: none时，它将不起作用。<代码>H213<代码>F214
这就是解决问题的方法：
- 如果在单击按钮时
div没有同时具有fadeIn和fadeOut类，这意味着当您第一次呈现视图时，div处于初始状态，因此您需要在中添加fadeIn类。 - 如果在单击按钮时，div确实有<代码>D24但<
div>D25类，这意味着以前的div已经淡入，现在需要淡出。因此，只需从div中删除fadeIn并添加fadeOut类。 - 最后一种情况与上面的情况相反，如果在单击按钮时
div具有fadeOut类，则需要添加fadeIn并删除fadeOut。<代码>H235<代码>F236
以下是代码
$(function() {
$("button").click(function() {
if ($(".window").hasClass("fadeIn")) {
// if the div has fadeIn class, remove it and add fadeOut
$(".window").toggleClass("fadeIn").toggleClass("fadeOut")
}
else if ($(".window").hasClass("fadeOut")) {
// if the div has fadeOut class, remove it and add fadeIn
$(".window").toggleClass("fadeOut").toggleClass("fadeIn")
} else {
// if the div has neither of fadeIn nor fadeOut, add fadeIn class in
$(".window").toggleClass("fadeIn")
};
})
}).window{
background: blue;
width: 200px;
height: 200px;
margin: 20px;
opacity: 0;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="window animated"></div>
<button style="margin: 100px;">Toggle Fade Window</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51804183
复制相关文章
相似问题
腾讯云开发者
