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>

Answer 2

嘿，我看还没有人回答你。查看我的 codepen，下面的相关代码亮点。也很抱歉我不得不使用 jQuery，我开始用 javascript 编写它，它是如此之大，jQuery 无需手动循环两次即可完成它（我想我只是一个菜鸟）无论如何希望这可以帮助你。

CSS

.list-item {
    display: block;
    width: 200px;
    height: 50px;
    margin-bottom: 10px;
    line-height: 50px;
    text-align: center;
    background-color: #fff;
    transition: all 0.5s ease;
}

.list-item.hide {
    height: 0;
    margin: 0;
    opacity: 0;
}

jQuery

var listItem = $('.list-item');

listItem.click(function() {
    if( listItem.hasClass('hide')) {
      listItem.removeClass('hide');
    } else {
      listItem.not(this).addClass('hide');
    }
});

http://codepen.io/StefanBobrowski/pen/QpzYQj