javascript - 动画后未触发过渡

Question

我制作了一个搜索模式，它是通过 jQuery 触发的，jQuery 将类 -open 添加到主父 div #search-box。我的问题是 #search-box 会淡入，但 input 不会转换。我不确定为什么会这样。 Here is a link to the full codepen

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