我有一些类似的css
.top-over {
position: absolute;
top: 205px;
z-index: 55;
width: 100%;
min-height: 300px;
}
@keyframes slideDown {
0% {
-webkit-transform: translateY(-420px);
}
100% {
-webkit-transform: translateY(0%);
}
}
.slideDown {
-webkit-animation-name: slideDown;
animation-name: slideDown;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
visibility: visible !important;
z-index: 50;
}
你会看到我有两个类slideDown和.top-over.slideDown的工作还可以，但在.top上它只是跳过了没有滑动效果，有人知道我需要纠正什么吗？这对slideUp有效，谢谢
几个注意事项：
- 您可能想要删除带有-webkit前缀的值，因为在这种情况下不需要这些值。在需要它们的情况下，也不应该使用它们。每个没有前缀的现代浏览器都支持变换和动画
- 在动画中使用相同的单位-选择px或%，而不是两者都选择
- 你也应该发布你的html代码。请尽可能减少它，并分享您的片段
<style>
.slider {
overflow-y: hidden;
max-height: 500px; /* approximate max height */
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.slider.closed {
max-height: 0;
}
</style>
<table class="table">
<tr>
<td>
<div class="slider">Some content here....</div>
</td>
</tr>
</table>
<%--希望这能奏效。提前感谢--%>
<script type="text/javascript">
//You can use Predifined Function in JQuery
$(function () {
$('#trCaptcha').slideUp();
$('#trCaptcha').slideDown();
});
</script>