webkit css переходы - PullRequest
Новая
       11

webkit css переходы

1 голос
/ 21 февраля 2010

Опробовал несколько переходов webkit на сайте и натолкнулся на проблему. Состояние наведения на моих ссылках добавляет границу в 1 пиксель и уменьшает отступ, так что расположение остается неизменным. Работает нормально нормально, но не когда я добавляю переход. Очевидно, так как я делаю только 1px изменения, это происходит внезапно, но это не происходит одновременно - отступы изменяются до границы, так что все это «перемешивается». 

#loginbuttons a {
    text-decoration: none;
    padding: 5px;
    -webkit-transition: all 0.5s ease;
}

#loginbuttons a:hover {
    padding: 4px;
    border: 1px solid black;
    background-color: yellow;
}

Лучший способ, который я нашел, чтобы обойти это, это иметь белую рамку в нормальном состоянии, чтобы она только меняла цвет, но я хочу, чтобы он был прозрачным. Кроме того, есть ли какой-нибудь способ закрасить фоновый цвет белым вместо черного без установки белого фона? Опять же, я хочу, чтобы он был прозрачным, но он выглядит странно, становится серым, а затем желтым!

В моем меню навигации также есть переходы, и происходит то же самое (на этот раз изменяя отступы и поля): 

#nav ul li a {
    color: white;
    padding: 10px 10px 8px 10px;
    margin: 0 5px;
    border: 1px solid black;
    opacity: 0.85;
    -webkit-transition: all, 0.5s;
}

#nav ul li a:hover, #nav ul li a.selected {
    color: black;
    padding: 13px 13px 11px 13px;
    margin: 0 2px;
    text-shadow: 2px 2px 4px white, -2px -2px 4px white, 2px -2px 4px white, -2px 2px 4px white;
    opacity: 1;
    -webkit-box-shadow: 0px 0px 8px #888;
}

Хммм, только что попытался немного увеличить значения, и даже изменение поля и отступа на 15px с помощью линейного перехода все еще приводит к небольшому (выглядит как 1 или 2px) глюку. То же самое происходит в сафари и Chrome.

У кого-нибудь есть идеи, как сделать это гладко? Или разобраться с цветом вопроса? Думаешь, было бы лучше сделать это с помощью jquery (игнорируя кросс-браузерную поддержку!)? Можете пойти и посмотреть, происходит ли то же самое с оперой ...

edit: похоже, что версия 10.5a для Mac всё ещё не поддерживает переходы ...

1 Ответ

2 голосов
/ 21 февраля 2010

Прежде всего, возможно, стоит попробовать border: 1px solid transparent, чтобы при переходе изменялся только цвет границы. В этом смысле отступы остаются прежними, и браузер отгадывает меньше. Если transparent не работает, любой цвет со значением альфа 0, например, rgba(0, 0, 0, 0), также приемлем.

Opera Presto 2.3 поддерживает переходы , но запрашивает разные операторы - -o-transition-property и др. Надеюсь, что эта ссылка будет полезна. Firefox также выполняет CSS-переходы , и у них есть демонстрационная страница . Чтобы переходы работали в Firefox, нужно использовать операторы -moz-.

...