动画后未触发的过渡

2017-02-14 65 views 0 likes

我做了一个搜索模式，它是通过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

动画后未触发的过渡

回答

相关问题