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（请参阅“向下滑动&淡出”），但正如您在上面所看到的，这并未达到我所需要的水平。

谢谢

p.s.我正在使用Ionic2，所以不想使用任何其他Javascript框架，如JQuery（只是简单的JavaScript和CSS）。

Answer 1

嘿所以我看到没有人回答你呢。查看我的codepen，下面的相关代码亮点。另外对不起，我不得不使用jQuery，我开始在javascript中编写它，它非常大，jQuery不需要手动遍历所有内容两次（我认为我只是一个noob）。无论如何希望这可以帮助你。

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

Answer 2

你需要在你的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>