Css动画输入/输出答案

【问题标题】：Css animation In/outCss动画输入/输出
【发布时间】：2015-06-01 23:37:54
【问题描述】：

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

我可以创建“in”动画，然后下拉菜单。但我无法创建“out”动画并像在 Google Developers 页面中那样向上下拉。这是我创建的一个 jsfiddle：

顺便贴一些代码：

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

【问题讨论】：

标签： jquery css angularjs css-animations

【解决方案1】：

也将过渡添加到.search-results-closed：

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

小提琴：https://jsfiddle.net/lmgonzalves/8y48q/54/

【讨论】：

mmh，好的，看起来很完美，但有一点问题。当 div 消失时，似乎根本没有消失。如果您使用萤火虫检查表单容器具有输入的高度 + div 即使消失。在这种情况下，如果我在输入下有一个按钮，它就不起作用。明白我的意思吗？

【解决方案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>

【讨论】：

我没有添加前缀以使代码变小，但让我解决这个问题。
@End.Game 你现在可以看到了吗？