使用CSS动画进/出

我试图重新创建“新” Google开发者网页的下拉动画（你可以在这里看到只要按一下在输入搜索：https://developers.google.com/analytics/devguides/collection/android/v4/app）使用CSS动画进/出

我可以创建“在”动画和下拉菜单下降。但我无法创建“out”动画，并像Google Developers页面那样继续下拉菜单。这里有一个的jsfiddle我创建：

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

我Poste的一些代码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>

一个非常简单的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); 
      }) 
     } 
    } 
});

来源

2015-06-01 End.Game

添加过渡到.search-results-closed太：

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

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

来源

2015-06-01 15:14:26 lmgonzalves

MMH，OK似乎完美，但有一个小问题。当DIV disapperas好像不是消失的。如果使用萤火虫进行检查，即使消失，表单容器也具有输入+ div的高度。在这种情况下，如果我有例如输入下的按钮，它不起作用。理解我的意思？ –

这就是你想要的吗？ https://jsfiddle.net/lmgonzalves/8y48q/55/ – lmgonzalves

是的人！谢谢！这是解决方案！ –

你可以用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>

来源

2015-06-01 15:32:10 Vandervals

你确定吗？似乎不工作 –

我没有添加前缀以使代码变小，但让我解决这个问题。 – Vandervals

@ End.Game现在可以看到吗？ – Vandervals

使用CSS动画进/出

回答

相关问题