如何使用淡入和淡出了按鈕單擊角JS？

Question

我試圖做一個簡單的淡入和淡出例如AngularJS.I需要顯示出與幻燈片一個div向上或向下滑動或者淡入淡出我們在jQuery的事情。我有頭（左頂部的按鈕圓圈）search按鈕**上點擊我展示搜索div它工作在我plunker。我的問題是做動畫... http://plnkr.co/edit/Z5Y51werBnzM6Yl7tcTB?p=preview 其次我需要添加z-index，因爲它產生新的層。當我點擊搜索按鈕**「我的名字」下來時，搜索欄是開放的。爲什麼？

<ion-view> 
    <ion-header-bar align-title="" class="bar-positive"> 
     <div class="buttons"> 
     <i style="font-size:25px!important" class="icon-right ion-android-radio-button-off" ng-click="showsearch()"></i> 

     </div> 
     <h1 class="title">Title!</h1> 
     <a class="button icon-right ion-chevron-right button-calm"></a> 
    </ion-header-bar> 
    <div class="list list-inset searchclass" ng-show="isdiplay"> 
     <label class="item item-input"> 
     <img src="https://dl.dropboxusercontent.com/s/n2s5u9eifp3y2rz/search_icon.png?dl=0"> 
     <input type="text" placeholder="Search"> 
     </label> 
    </div> 
    <ion-contend> 
     <div style="margin-top:50px"> 
     my name 
    </div> 
    </ion-contend> 

    </ion-view> 

Answer 1

不是想在這裏攻擊你，但只是一些小的反饋：

我看看你的代碼和它相當混亂到我的喜好。

你的HTML是不正確的（你有兩個頭的標籤，二體標籤，兩個HTML標籤？）

也是你寫

<ion-contend>，而不是<ion-content>

，並在你的CSS z-index=999px代替的z-index: 999

但無論如何，在這裏你有一個plunkr正在做你想做的事情：

Working Plunkr

基本上是我改變的是以下幾點：

爲了使搜索欄爭先恐後的內容，你應該讓自己的立場absolute，而不是relative。

然後我用ngClass有條件地適用取決於搜索欄的狀態（顯示/隱藏）

CSS片斷

/* Keyframes for the fade-in */ 
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 

.fade-in { 
    opacity:0; 
    -webkit-animation:fadeIn ease-in 1; 
    -moz-animation:fadeIn ease-in 1; 
    animation:fadeIn ease-in 1; 

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards; 
    animation-fill-mode:forwards; 

    -webkit-animation-duration: 0.5s; 
    -moz-animation-duration:0.5s; 
    animation-duration:0.5s; 
}