如何在不再徘徊時向後做動畫？

我在codepen上發現了這個動畫按鈕，我改變了一點，現在想把它添加到我的代碼中。但是，我希望動畫在元素不再徘徊時向後移動。目前它又從上到下。但是，我想這一點：如何在不再徘徊時向後做動畫？

懸停：頂部至底部

哈弗

結束：下往上

我認爲這是可能的:after:hover。但它不起作用，我不確定這是否是正確的方法。

.btn { 
 
    border: 0; 
 
    padding: 0 24px; 
 
    display: block; 
 
    position: relative; 
 
    transition: border-bottom-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.25s; 
 
    text-align: center; 
 
    border-bottom: solid 3px; 
 
    height: 48px; 
 
} 
 

 
.btn:not(.btn-disabled):before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0px; 
 
    bottom: 0px; 
 
    height: 0px; 
 
    width: 100%; 
 
    z-index: 0; 
 
    transition: all 0.3s cubic-bezier(1, 1, 1, 1) 0s; 
 
} 
 

 
.btn:not(.btn-disabled):hover:before { 
 
    top: 0%; 
 
    bottom: auto; 
 
    height: 100%; 
 
} 
 

 
.btn span { 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
.btn:focus { 
 
    outline: 0; 
 
} 
 

 
.btn:not(.btn-disabled):hover { 
 
    color: #ff0080; 
 
    border-bottom-color: #ffffcc; 
 
} 
 

 
.btn:not(.btn-disabled):active { 
 
    border-bottom-color: #0040ff; 
 
    transition-delay: 0s; 
 
    transition-duration: 0.15s; 
 
} 
 

 
.btn-primary { 
 
    background-color: #ffffcc; 
 
    color: #ff0080; 
 
} 
 

 
.btn-primary:before { 
 
    background: #fff; 
 
}

<button type="button" class="btn btn-primary"> 
 
    <span>Small Button</span> 
 
</button>

其實我的代碼是在薩斯，但我在這裏改變了它的示範。

來源

2017-08-07 Paili

沒有從codepen代碼工作就像你想的呢？ –

@Patrick Mlr不，它也沒有倒退。 – Paili

爲了防止過渡從頂部開始unhovered時，當不盤旋僞元素上設置top: 0和height: 0，和盤旋時更改height至100％。當高度從0到100％時，動畫的方向會下降，當從100％到0時，方向會上移。

.btn { 
 
    border: 0; 
 
    padding: 0 24px; 
 
    display: block; 
 
    position: relative; 
 
    transition: border-bottom-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.25s; 
 
    text-align: center; 
 
    border-bottom: solid 3px; 
 
    height: 48px; 
 
} 
 

 
.btn:not(.btn-disabled):before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 0; 
 
    width: 100%; 
 
    z-index: 0; 
 
    transition: all 0.3s cubic-bezier(1, 1, 1, 1) 0s; 
 
} 
 

 
.btn:not(.btn-disabled):hover:before { 
 
    height: 100%; 
 
} 
 

 
.btn span { 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
.btn:focus { 
 
    outline: 0; 
 
} 
 

 
.btn:not(.btn-disabled):hover { 
 
    color: #ff0080; 
 
    border-bottom-color: #ffffcc; 
 
} 
 

 
.btn:not(.btn-disabled):active { 
 
    border-bottom-color: #0040ff; 
 
    transition-delay: 0s; 
 
    transition-duration: 0.15s; 
 
} 
 

 
.btn-primary { 
 
    background-color: #ffffcc; 
 
    color: #ff0080; 
 
} 
 

 
.btn-primary:before { 
 
    background: #fff; 
 
}

<button type="button" class="btn btn-primary"><span>Small Button</span></button>

來源

2017-08-07 08:12:51

更改btn:before並提供

top: 0; 
left: 0; 
height: 0;

來源

2017-08-07 08:26:06

如何在不再徘徊時向後做動畫？

回答

相關問題