Css动画In/out

Question

我正在尝试重新创建 "new" google 开发者网页的下拉动画（您可以在此处看到，只需点击输入搜索：https://developers.google.com/analytics/devguides/collection/android/v4/app）

我可以创建 "in" 动画并且下拉菜单会下降。但是我无法创建 "out" 动画，也无法像 Google 开发者页面那样在下拉菜单中进行设置。这是我创建的 jsfiddle：

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

顺便说一句，我贴了一些代码：

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

很简单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);
            })
        }
    }
});

Answer 1

也向 .search-results-closed 添加过渡：

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

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

Answer 2

您可以使用 css 动画和 :focus 状态来做到这一点。

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>

Css动画In/out

Css animation In/out

css

jquery

css-animations

angularjs