Question

我创建了一个搜索模式，它是通过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＆gt;相同visibility: visible。

Answer 2

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

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

动画后未触发过渡

2 个答案: