我想在AngularJS中做一个简单的切换示例.我面临一个问题,我需要显示和隐藏一些动画,如向上滑动和向下滑动.我点击标题上的搜索按钮我显示搜索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>
使用Angular时,您仍然有机会使用普通的旧CSS转换.但是,有很多方法可以动画元素.在我的解决方案中,我使用ng-class而不是ng-show.单击触发器时,我会激活该类.最后,类会更改元素的状态,从而产生您想要实现的动画.
您只需将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;
- }
- })
- .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>