增加按钮旋转的延迟

Question

我在网站的左下角创建了一个“更多”按钮来显示菜单。

当你点击按钮时，+就变成了x

如何在旋转中添加延迟?2秒

下面是我的html代码：

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <div class="fa-4x">
      <span class="fa-layers fa-fw">
        <i class="fas fa-circle"></i>
        <i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"></i>
      </span>
    </div>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdown-menu-action">
    <li><a href="/profil" data-drupal-link-system-path="profil"><i class="fas fa-id-card fa-lg"></i> Créer mon profil</a></li>
  </ul>
</div>

这是我的样式表：

#block-views-block-profile-button-create-block-1 {
    position: fixed;
    z-index: 999;
    bottom: 20px;
    left: 20px;
    width: 70px;
    height: 70px;
}

#block-views-block-profile-button-create-block-1 .btn,
#block-views-block-profile-button-create-block-1 .btn:focus {
    background-color: initial;
    padding: 0;
    border: 0;
}

#block-views-block-profile-button-create-block-1 .fa-circle {
    text-decoration: none;
    font-size: 70px;
    color: rgba(63, 182, 24, 0.60);
    border: 3px solid #ffffff;
    border-radius: 50%;
    webkit-box-shadow: 0 0 10px rgba(10,10,0,.9);
    -moz-box-shadow: 0 0 10px rgba(10,10,0,.9);
    -ms-box-shadow: 0 0 10px rgba(10,10,0,.9);
    -o-box-shadow: 0 0 10px rgba(10,10,0,.9);
    box-shadow: 0 0 10px rgba(10,10,0,.9);
}

#block-views-block-profile-button-create-block-1 .open .fa-plus {
    transform: rotate(-45deg);
}

#block-views-block-profile-button-create-block-1 .dropdown-menu a {
    color: #000000;
}

Answer 1

我想你所说的“延迟”是指过渡。如果是这样，尝试将此代码添加到您的css中：

#block-views-block-profile-button-create-block-1 .fa-plus {
    transition: transform 2s;
}

然后，可能将2s改为333ms，因为2s太慢了。