html - 在 Accordion 面板标题中应用过渡

Question

我的 html 页面中有一个 Accordion ，我需要在标题 (panel-title) 中移动文本，以便使用 css3 过渡在悬停时向右移动一点

下面是我尝试过的

HTML

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading headtext">
  <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
      Collapsible Group Item #1
    </a>
  </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
  <div class="panel-body headtext">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry</div>
     </div>
    </div>
    <div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
      Collapsible Group Item #2
    </a>
  </h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
  <div class="panel-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
</div>
   </div>
  </div>

CSS:

.panel-title > a {
color: #43C3E8;
}
.panel-title > a:hover {
color: #F06426;
padding-left:20px;
text-decoration:none;
outline:none;
transition:all 0.2s ease 0s;
}

.panel-heading {
transition: all 0.2s ease 0s;
}

这样做之后我得到的是悬停过渡应用于 anchor 标记内的文本。但是当光标被移除时，文本移动得更快。我希望这个过渡时间与悬停相同。

Answer 1

在元素中添加过渡，而不是在 :hover 中

a {
    display: inline-block;
    color: white;
    text-decoration:none;
    padding: 20px;
    background: black;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

a:hover {
    background: red;       
}

http://jsfiddle.net/Lw8UM/