过渡持续时间在引导按钮上不起作用答案

【问题标题】：Transition duration not working on bootstrap button过渡持续时间在引导按钮上不起作用
【发布时间】：2020-01-01 20:13:22
【问题描述】：

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

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

请注意，所有其他属性都会在描述的持续时间内（本例中为 2 秒）发生变化。

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/

【问题讨论】：

标签： css bootstrap-4 css-transitions

【解决方案1】：

如果您想在您的css 属性之一上使用transition，您需要先为其设置默认值，然后在悬停时更改它。特别是那些需要大小的属性，如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

【讨论】：