CSSは、私が項目のリストを持っているアップ＆ダウンアニメーション

Question

アイテムを折る：

私はただ一つの項目を表示するために、アニメーション効果で崩壊したい、

：

を

ご覧のとおり、現在は1つのアイテムに折りたたまれていますが、コンポーネント全体が折りたたまれていません。

私は現在、ちょうどゼロにアイテムの不透明度を設定しています：

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. また、それらはまだ空間を占めているため、残りのドームはまだその下にあります。彼らはダウン&をスライドしているかのように

質問

にはどうすればアイテムがアニメーション効果を持つ5つの項目に1つのアイテムから切り替えることができますか？また、彼らはまた、彼らが立ち上がったときに彼らの下のスペースを解放します。

私はthis example（「Slide down & Fade」を参照してください）を見ましたが、上記のように、これは私が必要とするものではありません。

ありがとう

p.s.私はIonic2を使用しているので、JQueryのような他のJavascriptフレームワーク（単純なjavascriptとcss）を使いたくない。

Answer 1

ねえ、まだ誰もあなたにまだ答えていないのを見ました。下の関連コードのハイライトを参照してください。また、私はjQueryを使用しなければならなかったことを申し訳なく思ったので、私はJavaScriptで書いていましたが、それは非常に大きかったので、jQueryは手動で2回すべてをループすることなくそれを行います（私はちょうど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>