javascript - CSS上下折叠动画

我有一个项目清单：



我想用动画效果折叠起来，只显示一项：



如您所见，当前它折叠为一项，但是整个组件都没有折叠。

我目前只是将项目的不透明度设置为零：

的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";
    }
  }

问题

这些项目仍然存在，它们只是透明的。


因此，如果我单击它们，它们仍然会响应。
而且，它们仍在占用空间，因此dom的其余部分仍在其下方。


题

如何允许具有动画效果的项目从1个项目切换到5个项目，就像它们上下滑动一样？同样，当它们起来时，它们还释放了下面的空间。

我确实看过this example（请参阅“滑动并淡入淡出”），但是正如您在上面看到的那样，这没有达到我所需要的。

谢谢

ps。我正在使用Ionic2，所以不想使用其他任何Javascript框架（如JQuery）（只是普通的javascript和css）。

最佳答案

您需要在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>