Question

我正在尝试将过渡效果应用于div，但它无效。我正在使用bootstrap 3

<form class="navbar-form meco-navbar-form navbar-left">
    <div class="form-group meco-search">
        <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-primary">Search</button>
</form>

这是我正在使用的CSS

.meco-search input{
    width:100% !important;
}
.meco-navbar-form{
    width:600px !important; 
}
.meco-search:focus-within{
    width:83% !important;

}

在此代码中，输入的宽度始终为100％，当我在输入中单击时，自定义搜索的宽度会发生变化。它工作正常，但我无法应用过渡效果。以下是我试图做的不同的css代码，但失败了。

.meco-search{
    transition-property: width;
    transition-duration: 4s;
    transition-delay: 2s;
}
.meco-search:active{
    transition-property: width;
    transition-duration: 4s;
    transition-delay: 2s;
}
.meco-search:focus-within{
    width:83% !important;
    transition-property: width;
    transition-duration: 4s;
    transition-delay: 2s;   
}

请告诉我我错在哪里。

Answer 1

要在transition代码上width生成input，您需要从!important删除.custom-search input。

当在样式声明上使用重要规则时，这个声明覆盖任何其他声明。

.custom-search input {
  width: 100%;
  transition:width 1s ease;
}

.custom-navbar-form {
  width: 600px !important;
}

.custom-search {
  transition-property: width;
  transition-duration: 4s;
  transition-delay: 2s;
}

.custom-search:active {
  transition-property: width;
  transition-duration: 4s;
  transition-delay: 2s;
}

.custom-search input:focus{
  width:50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form class="navbar-form custom-navbar-form navbar-left">
  <div class="form-group custom-search">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-primary">Search</button>
</form>

css3转换不使用伪类焦点内部

1 个答案: