動畫後未觸發的過渡

我做了一個搜索模式，它是通過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"); 
});

來源

2017-02-14 Simon

的原因是母公司#search-box在切換從display: none到block和CSS轉換慣於在不改變觸發。某些解決方案可能會使animation縮放輸入元素，或以其他方式隱藏#search-box。像使用height:0; overflow:hidden或visibility: hidden>visibility: visible。

來源

2017-02-14 10:59:13

啊謝謝你這個有用的信息。我已經更新了codepen，它的工作原理。 https://codepen.io/simonfricker/pen/EZrxoX – Simon

試試這個： https://codepen.io/adrianroworth/pen/rjPdKj

的原因是，display: none/display: block是導致動畫不能正常工作。我改變了使用絕對位置的方式，將它定位在屏幕外，同時仍然可見。

來源

2017-02-14 11:08:36

動畫後未觸發的過渡

回答

相關問題