如何在angular js中使用淡入和淡出按钮单击？

Question

我正在尝试在 AngularJS 中制作一个简单的淡入淡出示例。我需要像在 jquery 中那样显示一个向上滑动或向下滑动或淡入淡出的 div。我在标题 上有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 不正确（你有两个 head 标签，两个 body 标签，两个 html 标签？）

你也写

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

在你的 CSS 中 z-index=999px 而不是 z-index: 999

但无论如何，你有一个 plunkr 正在做你想做的事：

Working Plunkr

基本上我改变的如下：

要使搜索栏覆盖内容，您应该将其位置设为absolute 而不是relative。

然后我使用ngClass 根据搜索栏的状态（显示/隐藏）有条件地应用淡入、淡出 css3 动画

css sn-p

/* 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;
}