javascript - CSS 上下折叠元素动画

Question

我有一个元素列表:

其中，我想用动画效果折叠，只显示一个元素:

如您所见，目前它折叠为一个元素，但整个组件并没有折叠。

我目前只是将元素的不透明度设置为零:

CSS

.slide-fade-hide {
  transition: all 1.2s ease-out;
  opacity: 0;
  //height: 2em;
}

.slide-fade-show {
  transition: all 1.2s ease-in;
  opacity: 1;
  //height: 2em;
}

html

<ion-list>
  <ion-row>
    <ion-col>
      <div id="search">
        <ion-searchbar class="ion-searchtext" id="ion-searchtext" [(ngModel)]="searchQueryText" (ionFocus)="focusSearch($event)" (change)="onChangeText($event)"
          (ionClear)="onCancelText($event)" (ionInput)="onInputText($event)" placeholder="{{jobType === 0 ? favourite ? 'Market Favourites' : 'Market' : favourite ? 'Postings Favourites' : 'Postings'}}"
          debounce="1"></ion-searchbar>
      </div>
      <!--<div id="pinButton"><button ion-button (click)="presentPopover()" color="primary"><ion-icon name="funnel"></ion-icon></button></div>-->
    </ion-col>
  </ion-row>

  <!--<div *ngIf="showExtraSearch === true">-->
  <div id="extra-filter-items" class="slide-fade-hide">
    <ion-row>
      <ion-col>
        <div id="location-filter">
          <ion-searchbar id="ion-locationbar" [(ngModel)]="searchQueryLocation" (ionClear)="onCancelLocation($event)" (ionInput)="onInputLocation($event)"
            (click)="presentFilterMap()" placeholder="Location" debounce="1"></ion-searchbar>
        </div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <div id="categories-filter">
          <ion-searchbar id="ion-locationbar" [(ngModel)]="searchQuerySectors" (ionClear)="onCancelSectors($event)" (ionInput)="onInputSectors($event)"
            (click)="presentFilterCategories()" placeholder="Sectors" debounce="1"></ion-searchbar>
        </div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <div id="rating-filter">
          <ion-searchbar id="ion-locationbar" [(ngModel)]="searchQueryRating" (ionClear)="onCancelRating($event)" (ionInput)="onInputRating($event)"
            (click)="presentFilterRating()" placeholder="Star Rating" debounce="1"></ion-searchbar>
        </div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <div id="time-filter">
          <ion-searchbar id="ion-locationbar" [(ngModel)]="searchQueryTime" (ionClear)="onCancelTime($event)" (ionInput)="onInputTime($event)"
            (click)="presentFilterTime()" placeholder="Last Online" debounce="1"></ion-searchbar>
        </div>
      </ion-col>
    </ion-row>
  </div>
</ion-list>

javascript

  showExtraFilters(): void {
    let extraItemsElement = document.getElementById('extra-filter-items');
    if (extraItemsElement) {
      extraItemsElement.className = "slide-fade-show";
    }
  }

  hideExtraFilters(): void {
    let extraItemsElement = document.getElementById('extra-filter-items');
    if (extraItemsElement) {
      extraItemsElement.className = "slide-fade-hide";
    }
  }

问题

元素仍然存在，它们只是透明的。

1. 所以如果我点击它们，它们仍然会响应。

2. 此外，它们仍在占用空间，因此 dom 的其余部分仍在其下方。

问题

如何让元素从 1 项切换到 5 项，并带有动画效果，就像它们上下滑动一样？此外，当它们起来时，它们还会腾出下方的空间。

我看过this example (参见“Slide down & Fade”)，但是正如您在上面看到的，这并没有达到我需要的效果。

谢谢

附注我正在使用 Ionic2，所以不想使用任何其他 Javascript 框架，例如 JQuery(只是普通的 javascript 和 css)。

Answer 1

您需要在您的 css 中使用 height 属性进行转换

$(function(){

$("li").click(function(){
$(this).addClass("vanish");

})
});

.vanish {
  height:0;
  transition: 1s all linear;
  opacity:0;
}

li {
  height:2em;
  opacity:1;
  background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li>Click me to collapse</li>
<li>Click me to collapse</li>
<li>Click me to collapse</li>
</ul>
</div>