【发布时间】：2014-10-19 19:38:00
【问题描述】：
我想用类似 jQuery UI 的盲效切换通知：jQuery UI blind effect
为了实现它，我创建了 CSS3 动画：
.blind-top-in{
-webkit-animation-duration: 2s;
-webkit-animation-name: blindTopIn;
animation-duration: 2s;
animation-name: blindTopIn;
}
.blind-top-out{
-webkit-animation-duration: 2s;
-webkit-animation-name: blindTopOut;
animation-duration: 2s;
animation-name: blindTopOut;
}
@-webkit-keyframes blindTopIn{
from{
max-height: 0px;
height: 0 !important;
}
to{
max-height: 75px;
height: auto !important;
}
}
@-webkit-keyframes blindTopOut{
from{
max-height: 75px;
height: auto !important;
}
to{
max-height: 0px;
height: 0 !important;
}
}
@keyframes blindTopIn{
from{
max-height: 0px;
height: 0 !important;
}
to{
max-height: 75px;
height: auto !important;
}
}
@keyframes blindTopOut{
from{
max-height: 75px;
height: auto !important;
}
to{
max-height: 0px;
height: 0 !important;
}
}
想法是它应该从 0px 宽度到 auto/75px 并向后盲。
不幸的是，这不起作用 - 它看起来像“半高通知”出现并动画到正常高度，然后如果我添加 blind-top-out 类它动画到半高然后消失没有动画。我究竟做错了什么？如果有人决定帮助我，我会非常高兴 - 提前谢谢你。
片段 - 工作不完全像它应该的那样（我不知道为什么），但你看到动画只动画“一半”的通知
.blind-top-in{
-webkit-animation-duration: 2s;
-webkit-animation-name: blindTopIn;
animation-duration: 2s;
animation-name: blindTopIn;
}
.blind-top-out{
-webkit-animation-duration: 2s;
-webkit-animation-name: blindTopOut;
animation-duration: 2s;
animation-name: blindTopOut;
}
@-webkit-keyframes blindTopIn{
from{
max-height: 0px;
height: 0 !important;
}
to{
max-height: 75px;
height: 75px !important;
}
}
@-webkit-keyframes blindTopOut{
from{
max-height: 75px;
height: 75px !important;
}
to{
max-height: 0px;
height: 0 !important;
}
}
@keyframes blindTopIn{
from{
max-height: 0px;
height: 0 !important;
}
to{
max-height: 75px;
height: 75px !important;
}
}
@keyframes blindTopOut{
from{
max-height: 75px;
height: 75px !important;
}
to{
max-height: 0px;
height: 0 !important;
}
}<html>
<head>
<title>TODO supply a title</title>
<meta charset="windows-1250">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
"use strict";
$(document).ready(function(){
$("#showBtn").click(function(){
$("#notification").addClass("blind-top-in").removeClass("blind-top-out")});
$("#hideBtn").click(function(){
$("#notification").addClass("blind-top-out").removeClass("blind-top-in");
});
});
</script>
</head>
<body class="container">
<div id="notification" class="alert alert-info">Notify user</div>
<button id="showBtn" class="btn btn-success btn-sm" style="margin-top: 50px;">Show</button>
<button id="hideBtn" class="btn btn-danger btn-sm" style="margin-top: 80px;">Hide</button>
</div>
</body>
</html>【问题讨论】：
-
你能为你的代码创建一个小提琴吗？
-
你不能从高度动画或从高度动画：自动。这可能是一个有用的解决方法：stackoverflow.com/questions/3508605/…
-
@K K 我加了sn-p
-
@3rror404 我改了还是不行。
标签： javascript css css-animations