如何使用淡入和淡出了按钮单击角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; 
}