All geek questions in one place

How to slide and slide down in AngularJS?

I am trying to make a simple switching example in AngularJS. I ran into one problem that I need to show and hide with some animation, for example, slide up and slide down. I have a search button on the title when I click. I show a div search, it works in my plunker. My problem is to make an animation ...

Secondly, I need to add z-index because it creates a new layer. When I click the search button , my name comes down when the search bar is open. Why?

 <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>
+6
source share
1 answer

When using Angular, you still have the option to use plain old CSS transitions. However, there are many ways to animate elements. In my solution here, I am using ng-class instead of ng-show . I switch the active class when you click on the trigger. Finally, the class changes the state of the element, which leads to the animation that you would like to achieve.

You can simply change ng-show to ng-class="{'active':isdiplay}" and add the following 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; }

However, as I said, you can also use ng-show with the ngAnimate module, which should be included in one of your own modules. This will allow you to use the animation out of the box so that elements that can be animated get classes like .ng-hide-remove , .ng-hide-add and .ng-hide-add-active , etc. Then you can style these classes yourself.

 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>
+6
source

Source: https://habr.com/ru/post/988606/

More articles:


All Articles