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

前端之家收集整理的这篇文章主要介绍了如何在AngularJS中向上滑动和向下滑动?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在AngularJS中做一个简单的切换示例.我面临一个问题,我需要显示和隐藏一些动画,如向上滑动和向下滑动.我点击标题上的搜索按钮我显示搜索div它在我的plunker工作.我的问题是做动画……

其次我需要添加z-index,因为它会生成新的图层.当我点击搜索按钮时,“我的名字”会在搜索栏打开时关闭.为什么?

  1. <ion-view>
  2. <ion-header-bar align-title="" class="bar-positive">
  3. <div class="buttons">
  4. <i style="font-size:25px!important" class="icon-right ion-android-radio-button-off" ng-click="showsearch()"></i>
  5.  
  6. </div>
  7. <h1 class="title">Title!</h1>
  8. <a class="button icon-right ion-chevron-right button-calm"></a>
  9. </ion-header-bar>
  10. <div class="list list-inset searchclass" ng-show="isdiplay">
  11. <label class="item item-input">
  12. <img src="https://dl.dropBoxusercontent.com/s/n2s5u9eifp3y2rz/search_icon.png?dl=0">
  13. <input type="text" placeholder="Search">
  14. </label>
  15. </div>
  16. <ion-contend>
  17. <div style="margin-top:50px">
  18. my name
  19. </div>
  20. </ion-contend>
  21.  
  22. </ion-view>
使用Angular时,您仍然有机会使用普通的旧CSS转换.但是,有很多方法可以动画元素.在我的解决方案中,我使用ng-class而不是ng-show.单击触发器时,我会激活该类.最后,类会更改元素的状态,从而产生您想要实现的动画.

您只需将ng-show更改为ng-class =“{‘active’:isdiplay}”并添加以下CSS:

  1. .searchclass {
  2. border: 1px solid red;
  3. margin: 0 !important;
  4. position: relative;
  5. top: 44px;
  6. z-index: 9999;
  7. -webkit-transition: height .3s ease-in-out;
  8. transition: all .3s ease-in-out;
  9. height: 0;
  10. opacity: 0;
  11. }
  12. .searchclass.active {
  13. height: 49px;
  14. opacity: 1;
  15. }

但是,正如我之前所说,你也可以使用ng-show和模块ngAnimate,它需要包含在你自己的一个模块中.这将启用动画开箱即用,以便可以动画的元素获得类,如.ng-hide-remove,.ng-hide-add和.ng-hide-add-active等.然后你可以设置这些类的样式靠自己.

  1. angular.module('ionicApp',['ionic']).controller('MyController',function($scope) {
  2. $scope.isdiplay = false;
  3. $scope.showsearch = function() {
  4. $scope.isdiplay = !$scope.isdiplay;
  5. }
  6. })
  1. .searchclass {
  2. border: 1px solid red;
  3. margin: 0 !important;
  4. position: relative;
  5. top: 44px;
  6. z-index: 9999;
  7. -webkit-transition: height .3s ease-in-out;
  8. transition: all .3s ease-in-out;
  9. height: 0;
  10. opacity: 0;
  11. }
  12. .searchclass.active {
  13. height: 49px;
  14. opacity: 1;
  15. }
  1. <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet" />
  2. <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  3. <div ng-app="ionicApp" ng-controller="MyController">
  4. <ion-view>
  5. <ion-header-bar align-title="" class="bar-positive">
  6. <div class="buttons">
  7. <i style="font-size:25px!important" class="icon-right ion-android-radio-button-off" ng-click="showsearch()"></i>
  8. </div>
  9. <h1 class="title">Title!</h1>
  10. <a class="button icon-right ion-chevron-right button-calm"></a>
  11. </ion-header-bar>
  12. <div class="list list-inset searchclass" ng-class="{'active':isdiplay}">
  13. <label class="item item-input">
  14. <img src="https://dl.dropBoxusercontent.com/s/n2s5u9eifp3y2rz/search_icon.png?dl=0">
  15. <input type="text" placeholder="Search">
  16. </label>
  17. </div>
  18. <ion-contend>
  19. <div style="margin-top:50px">
  20. my name
  21. </div>
  22. </ion-contend>
  23. </ion-view>
  24. </div>

猜你在找的Angularjs相关文章