Css animation In/out

Refresh

March 2019

Views

41 time

1

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);
            })
        }
    }
});

2 answers

0

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>
2

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/