过渡时间在引导按钮上不起作用

Question

我正在尝试在某些引导按钮上添加过渡效果。

问题在于高度和宽度属性。这些会立即更改，而无需考虑过渡持续时间属性。

请注意，所有其他属性在描述的持续时间内（在这种情况下为2s）内更改。

HTML

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div> 
  <button type="button" data-toggle="modal" data-target="#infoModal" class="btn btn-outline-warning mt-5 mb-3 3mr-3 ">Learn More</button>
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.btn-outline-warning {

    border-color: white;
    transition: all;
    transition-duration: 2s;


  }

  .btn-outline-warning:hover {

    border-color: rgb(255, 136, 0);
    background-color: rgba(0,0,0,.5);
    transform: rotate(20deg);
    width: 300px;
    height: 100px;
    }

这里是我的JSFiddle，以进行更多的说明和演示。

https://jsfiddle.net/p34mjfr5/11/

Answer 1

如果要在transition属性之一上使用css，则需要先为其设置默认值，然后在悬停时对其进行更改。特别是那些需要大小的属性，例如px或其他。width或height遵循此规则。

.btn-outline-warning {
  border-color: white;
  transition: 2s all ease;
  width: 200px; /* default value */
  height: 50px; /* default value */
}

.btn-outline-warning:hover {
  border-color: rgb(255, 136, 0);
  background-color: rgba(0, 0, 0, .5);
  transform: rotate(20deg);
  width: 300px;
  height: 100px;
}

JSFiddle