温馨提示×

slidedown如何配合CSS动画

小樊
86
2024-07-04 17:46:21
栏目: 编程语言

要配合CSS动画使用slideDown方法,可以在CSS中定义动画效果,并在slideToggle方法中传入该动画名称。下面是一个示例代码:

HTML:

<div class="box">内容</div>
<button id="toggle">点击切换</button>

CSS:

.box {
  display: none;
}

.slide-down {
  animation-name: slide-down;
  animation-duration: 1s;
}

@keyframes slide-down {
  from {
    max-height: 0;
  }
  to {
    max-height: 200px; //根据实际需要调整高度值
  }
}

JavaScript:

$('#toggle').click(function() {
  $('.box').slideToggle('slow', function() {
    $(this).toggleClass('slide-down');
  });
});

在这个示例中,当点击按钮时,box元素会以slide-down动画效果展开或收起。根据实际需求可调整动画效果和时间。

0