Question

我有一个手风琴..虽然打开它是缓慢打开但是在ms范围的几分之内关闭非常禁食。请关闭时帮我改变动画。我在这里分享我的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是开放式手风琴。帮我关闭手风琴。在此先感谢。

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);
 }
}

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

Answer 2

我认为主要问题在于动画。它不是切换动画的最佳选择。如果你检查你的动画，你可以看到它只是一个开放的动画。您可以使用两个动画或仅使用一个动画，并使用css使其反向，但是它会很麻烦并且还会产生可怕的代码。但是你可以使用完美运行的转换，它看起来更好，产生更少的代码。

以下是代码：

CSS：

有一个.accordion类，开头为0，我有一个2s长的过渡。我使用max-height因为auto不起作用，它会在打开时与内容一样高。

.accordion {
  background-color: lightgreen;
  max-height: 0;
  overflow: hidden;
  transition: max-height 2s;
}
.accordion.open {
  max-height: 200px;
}

HTML：

在HTML中，我在一个打开div的按钮上有一个点击事件。它具有切换功能。在accordion div上有一个带有open类和一个isOpen布尔值的ngClass。

<button (click)="toggle()">OPEN</button>
<div class="accordion" [ngClass]="{'open': isOpen}">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

TypeScript代码：

这是一个用于检查手风琴状态的简单代码。

isOpen:boolean = false;
public toggle() {
  if(this.isOpen) {
    this.isOpen = false;
  }else {
    this.isOpen = true;
  }
}

就是这样。我希望你能理解我的英语：D。

这是一个WORKING PLUNK。

如何在使用angular2和CSS

2 个答案: