CSS - переход на границе не работает нормально - PullRequest
Новая
       4

CSS - переход на границе не работает нормально

5 голосов
/ 11 июля 2011

Код CSS: 

.css3_nudge ul li a {
   -webkit-transition-property: color, background-color, padding-left, border-right;
   -webkit-transition-duration: 400ms, 400ms, 400ms, 400ms;
}

.css3_nudge ul li a:hover {
   background-color: #efefef;
   color: #333;
   padding-left: 50px;
   border-right: 1px solid red;
}

HTML-код: 

<div class="css3_nudge nudge">
   <ul>
      <li><a href="#" title="Home">Home</a></li>
      <li><a href="#" title="Blog">Blog</a></li>
      <li><a href="#" title="About">About</a></li>
      <li><a href="#" title="Register">Register</a></li>
      <li><a href="#" title="Contact">Contact</a></li>
   </ul>
</div>

Переход работает нормально для всех элементов, кроме границы, он появляется только в конце 400 мс, не влияет на границу.

Я пытаюсь добиться эффекта, подобного новым кнопкам Google Gmail.

Заранее спасибо за любую помощь

1 Ответ

7 голосов
/ 11 июля 2011

Это довольно простое исправление.Вам просто нужна граница, чтобы уже существовать до эффекта наведения.Так что просто установите border-right: 1px solid #fff;, как показано ниже: 

.css3_nudge ul li a {
   -webkit-transition-property: color, background-color, padding-left, border-right;
   -webkit-transition-duration: 400ms, 400ms, 400ms, 400ms;
   border-right: 1px solid #fff; /* added property */
}

Тогда переход эффективно просто меняет цвет границы вместо создания границы.

...