我想在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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。