Question

我正在尝试在AngularJS中创建一个简单的切换示例。我面临一个问题，我需要显示和隐藏一些动画，如向上滑动和向下滑动。我点击标题上的search按钮我显示搜索div它正在我的plunker中工作。我的问题是做动画......

其次我需要添加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

使用Angular时，你仍然有机会使用普通的旧CSS转换。但是，有许多方法可以为元素设置动画。在我的解决方案中，我使用ng-class代替ng-show。当你点击触发器时，我切换班级active。最后，类会更改元素的状态，从而产生您想要实现的动画。

您只需将ng-show更改为ng-class="{'active':isdiplay}"并添加以下CSS：

.searchclass {
  border: 1px solid red;
  margin: 0 !important;
  position: relative;
  top: 44px;
  z-index: 9999;
  -webkit-transition: height .3s ease-in-out;
  transition: all .3s ease-in-out;
  height: 0;
  opacity: 0;
}
.searchclass.active {
  height: 49px;
  opacity: 1;
}

但是，正如我之前所说，您可以将ng-show与模块ngAnimate一起使用，模块.ng-hide-remove需要包含在您自己的模块中。这将启用开箱即用的动画，以便可以设置动画的元素获得.ng-hide-add，.ng-hide-add-active和angular.module('ionicApp', ['ionic']).controller('MyController', function($scope) { $scope.isdiplay = false; $scope.showsearch = function() { $scope.isdiplay = !$scope.isdiplay; } })等类。然后您可以自己设置这些类的样式。 / p>

.searchclass {
  border: 1px solid red;
  margin: 0 !important;
  position: relative;
  top: 44px;
  z-index: 9999;
  -webkit-transition: height .3s ease-in-out;
  transition: all .3s ease-in-out;
  height: 0;
  opacity: 0;
}
.searchclass.active {
  height: 49px;
  opacity: 1;
}

<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet" />
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<div ng-app="ionicApp" ng-controller="MyController">
<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-class="{'active':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>  
</div>

$('.summernote').summernote({
         codemirror: {
            theme: 'monokai',
            htmlMode:true,
            lineNumbers: true,
            mode: 'text/html'
        }
        height: 200
});

如何在AngularJS中向上滑动和向下滑动？

1 个答案: