动画后未触发转换

Question

我建立了一个搜索模式，它是通过jQuery触发的，它将类-open添加到主父div #search-box中。我的问题是，#search-box将淡入，但是input不会转换。我不知道为什么会这样。这里有一个指向完整代码的链接

  #search-box {
     display: none;
     position: absolute;
     height: 100%;
     width: 100%;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 999999999;

     input {
        border-bottom: 2px solid white;
        display: block;
        width: 100%;
        transform: scale3d(0,1,1);
        transform-origin: 0% 50%;
        transition: transform 3s;
     }

     &.-open{
        background: rgba(0, 0, 0, .8);
        display: block;
        animation: fadein .8s;

        input{
           transform: scale3d(1,1,1);
           transition-duration: 10s;
           transition-delay: 2s;
         }
      }
  }

@keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}

这里是jquery

$('a[href="#search"]').click(function() {
  $("#search-box").addClass("-open");
  setTimeout(function() {
    inputSearch.focus();
  }, 800);
});

$('a[href="#close"]').click(function() {
  $("#search-box").removeClass("-open");
});

Answer 1

原因是父#search-box正从display: none切换到block，而css转换不会触发该更改。有些解决方案是让animation缩放输入元素，或者以另一种方式隐藏#search-box。比如使用height:0; overflow:hidden或visibility: hidden > visibility: visible。

Answer 2

试试这个：https://codepen.io/adrianroworth/pen/rjPdKj

原因是display: none / display: block导致动画不能正常工作。我已经改变了工作方式，使用绝对位置将其定位在屏幕外，同时仍然是可见的。