如何在不再徘徊时向后做动画？

我在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

如何在不再徘徊时向后做动画？

回答

相关问题