当鼠标悬停时，css按钮和链接变化缓慢

I'm with a huge project and I can't find what is making a slowly transition.

我有一个庞大的项目,我无法找到缓慢过渡的东西。

Basically I want exactly this as the following snippet.

基本上我想要这个作为以下代码片段。

but in the project this transitions is happening really slowly. Any ideas why? is there a css tag I'm missing?

但在项目中,这种转变发生得非常缓慢。有什么想法吗?我缺少一个css标签吗?

.checkout-options {
  margin: 100px;
  text-align: center;
}
label.checkout-btn {
  padding: 20px;
}
label.checkout-btn a {
  color: #fff;
  padding: 20px;
  background-color: #36526D;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  text-decoration: none;
}
label.checkout-btn a:hover,
label.checkout-btn a:focus {
  color: #fff;
  background-color: #195a96;
  text-decoration: none;
  padding: 23px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkout-options">
  <div class="checkout-options--noregister">
    <label class="checkout-btn"><a href="#!/shipping">Buy</a>
    </label>
  </div>
</div>

1 个解决方案

#1

You can try to add : transition: 0s; to your css. To see if that makes a difference. See snippet.

您可以尝试添加:transition:0s;对你的CSS。看看是否有所作为。请参阅代码段。

.checkout-options {
  margin: 100px;
  text-align: center;
}
label.checkout-btn {
  padding: 20px;
}
label.checkout-btn a {
  color: #fff;
  padding: 20px;
  background-color: #36526D;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  text-decoration: none;
}
label.checkout-btn a:hover,
label.checkout-btn a:focus {
  color: #fff;
  background-color: #195a96;
  text-decoration: none;
  padding: 23px;
  transition: 0s;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkout-options">
  <div class="checkout-options--noregister">
    <label class="checkout-btn"><a href="#!/shipping">Buy</a>
    </label>
  </div>
</div>