link之家
链接快照平台
- 输入网页链接，自动生成快照
- 标签化管理网页链接
相关文章推荐
|
买醉的野马 · HttpURLConnection下载文件， ...· 1 年前 · |
|
|
瘦瘦的木耳 · ComboBox.SelectedText ...· 2 年前 · |
|
|
旅行中的葡萄 · 中华人民共和国司法部政府信息公开· 2 年前 · |
|
|
睿智的柠檬 · az network nic | ...· 2 年前 · |
|
|
任性的青蛙 · EXCEL日期数据录入技巧，使用日期下拉菜单 ...· 2 年前 · |
从隐藏div开始，然后使用Animate.css fadeIn和fadeOut进行切换
问
从隐藏div开始，然后使用Animate.css fadeIn和fadeOut进行切换
EN
EN
Stack Overflow用户
提问于
2018-08-12 06:14:43
回答 1
查看 1.3K
关注 0
票数 2
我正在尝试使用display: none隐藏一个div，然后使用jQuery通过单击一个按钮从 Animation.css 切换fadeIn动画。
但是，当我尝试切换动画时，它可以工作，但隐藏它不会播放淡出动画。
下面是一个有效的 example
HTML：
代码语言：
javascript
运行
复制
<div class="window animated"></div>
<button style="margin: 100px;">Toggle Fade Window</button>CSS:
代码语言：
javascript
运行
复制
.window{
background: blue;
width: 200px;
height: 200px;
margin: 20px;
display: none;
}JS:
代码语言：
javascript
运行
复制
$(function() {
$("button").click(function() {
$(".window").toggleClass("fadeIn");
})谢谢!
EN
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
以下是代码
代码语言：
javascript
运行
复制
$(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")
})
代码语言：
javascript
运行
复制
.window{
background: blue;
width: 200px;
height: 200px;
margin: 20px;