CODEWITHSUNDEEP
jquerycssangularjscss-animations
Atlas91
Atlas91

Reputation: 5904

Css animation In/out

I'm trying to recreate the dropdown animation of the "new" google developers webpage (you can see here just click over the input search:https://developers.google.com/analytics/devguides/collection/android/v4/app)

I can create the "in" animation and the dropdown goes down. But i'm not able to create the "out" animation and make go up the dropdown like in the Google Developers page. Here's a jsfiddle i created:

http://jsfiddle.net/8y48q/53/

I poste some code btw:

<div ng-app="myApp">
    <div class="uk-width-1-1" ng-controller="TestCtrl">        
      <form id="form" class="uk-form uk-width-1-1 center-form">

              <!-- This is a button -->
              <input id="input" data-ng-click="openSearch()" hide-search="hideSearchContainer()" type="text" placeholder="text" class="uk-width-1-1 uk-vertical-align-middle">

                  <div hide-search="hideSearchContainer()" data-ng-class="{'search-results':userSearch, 'search-results-closed':!userSearch}" class="search-results-closed scrollable-vertical">
                      Hello i'm a dropdown!
                  </div>
       </form>
    </div>
</div>

A very simple angularjs

var myApp = angular.module('myApp', []);

myApp.controller('TestCtrl', function ($scope) {

    $scope.openSearch = function(){
            $scope.userSearch = true;
        };
        $scope.hideSearchContainer = function(){
            $scope.userSearch = false;
        };

});

myApp.directive('hideSearch', function($document){
    return {
        restrict: 'A',
        link: function(scope, elem, attr, ctrl) {
            elem.bind('click', function(e) {
                e.stopPropagation();
            });
            $document.bind('click', function() {
                scope.$apply(attr.hideSearch);
            })
        }
    }
});

Upvotes: 1

Views: 62

Answers (2)

Vandervals
Vandervals

Reputation: 6054

You could do this with css animations and :focus states.

p{
  border: 1px solid gray;
  width: 200px;
  text-align: center;
  height: 0;
  overflow: hidden;
  animation: hide 1s ease forwards;
  -webkit-animation: hide 1s ease forwards;
}
input:focus + p{
  display: block;
  -webkit-animation: show 1s ease forwards;
  animation: show 1s ease forwards;
}
@-webkit-keyframes show{
  0%{
    height: 0px;
  }
  100%{
    height: 50px;
  }
}
@-webkit-keyframes hide{
  0%{
    height: 50px;
  }
  100%{
    height: 0px;
  }
}
@keyframes show{
  0%{
    height: 0px;
  }
  100%{
    height: 50px;
  }
}
@keyframes hide{
  0%{
    height: 50px;
  }
  100%{
    height: 0px;
  }
}
<input type="text" id="box" placeholder="text">
<p>Hello, I'm an alert</p>

Upvotes: 0

lmgonzalves
lmgonzalves

Reputation: 6588

Add transition to .search-results-closed too:

.search-results-closed {
  transition: all 0.5s ease 0s, visibility 0.5s ease 0s;
}

FIDDLE: https://jsfiddle.net/lmgonzalves/8y48q/54/

Upvotes: 2

Related Questions