css - 过渡持续时间不适用于引导按钮

Question

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

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

请注意，所有其他属性都会在描述的持续时间内（本例中为 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/

标签： cssbootstrap-4css-transitions

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