html - 如何在使用 Angular 2 和 CSS 关闭时更改 Accordion 动画

Question

我有一个 Accordion .. 打开它时打开速度很慢，但关闭时它的关闭速度非常快，在几分之一毫秒的范围内。请帮我在关闭时更改动画。 我在这里分享我的 HTML 和 css 代码， 请帮忙。

HTML 代码:

<accordion>
 <accordion-group #groupUser class="outer admin">
    <div accordion-heading >
           ABCD
      <i class="pull-right" [ngClass]="{'closeArrow': groupUser?.isOpen, 'openArrow': !groupUser?.isOpen}"></i>
     </div>
     <div layout="row" class="row listing-element tracking-listing">
    <div layout="row">                     
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Car</div>
     </div>
     </div>
      <div layout="row">
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Bike</div>
      <div layout="row">
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Auto</div>
      </div>
      </div>
    </accordion-group>
</accordion>

CSS:

 #wd-faq .outer .panel-collapse .panel-body {
        margin-top: 18px;
        border: 0;
        background-color: blue;
        -webkit-animation:all 150ms;
        overflow:hidden;
    }
    @keyframes all {
        0% {
            height:0px;
        }
        100% {
            height:auto;
        }
    }

我上面粘贴的 CSS 是打开 Accordion 的。帮助我关闭 Accordion 。 提前致谢。

Answer 1

在你的 HTML 代码中这样尝试

HTML CODE

    <accordion>
         <accordion-group #groupUser class="outer admin">
            <div accordion-heading >
                   ABCD
              <i class="pull-right" [ngClass]="{'closeArrow': groupUser?.isOpen, 'openArrow': !groupUser?.isOpen}"></i>
             </div>
    <div class="slideInDown">
    </div>
<accordion-heading>
<accordion>

并使用这些代码更改您的 CSS

CSS

    .slideInDown{
 -webkit-animation-name: slideInDown;
 animation-name: slideInDown;
 -webkit-animation-duration: 80ms;
 animation-duration: 80ms;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}
@-webkit-keyframes slideInDown {
 0% {
 -webkit-transform: translateY(-100%);
 transform: translateY(-100%);
 visibility: visible;
 }
 100% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 }
}
@keyframes slideInDown {
 0% {
 -webkit-transform: translateY(-100%);
 transform: translateY(-100%);
 visibility: visible;
 }
 100% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 }
}

我不知道它是否能正确满足您的要求，但您可以尝试一次。