动画转换不工作与bootstrap 4

Question

我添加了animate (transition)for transform，但是它不能用bootstrap 4

.sub-button {
transform: scale(1);
transition: transform 2s;
}
.sub-button:hover {
transform: scale(1.5);
}

<button data-song-id="{{$song->id}}"  class="vote-to-collection sub-button btn " value="apply"  >

Answer 1

Bootstrap默认为按钮声明了transition规则。最好是通过更高的特异性或使用!important

来覆盖规则。

.sub-button {
transform: scale(1);
transition: all 2s!important;
}
.sub-button:hover {
transform: scale(1.5);
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<button data-song-id="{{$song->id}}"  class="vote-to-collection sub-button btn btn-primary" value="apply">testing</button>

Answer 2

我必须用.sub-button.btn代替.sub-button才能使动画工作:

.sub-button.btn {
transform: scale(1);
transition: transform 2s;
}
.sub-button.btn:hover {
transform: scale(1.5);
}

<button data-song-id="{{$song->id}}" class="vote-to-collection sub-button btn" ></button>