CSS непрозрачность iOS + переход видимости - PullRequest
Новая
       7

CSS непрозрачность iOS + переход видимости

8 голосов
/ 26 сентября 2011

Посмотрите на следующий тест в настольном браузере ( JSFiddle ): 

a {
  background: gray;
  display: block;
  margin: 100px;
  padding: 100px;
}
a span {
  opacity: 0;
  -webkit-transition: 0.5s;
  visibility: hidden;
}
a:hover span {
  opacity: 1;
  -webkit-transition: 0.5s;
  visibility: visible;
}
<a href="#">a <span>span</span></a>

Вы наводите курсор на элемент привязки, и элемент span исчезает, как и должно быть.

Теперь взгляните через устройство iOS. Результат: ничего не происходит.

Факты:

  • Если свойство перехода отсутствует, оно работает.
  • Если свойство непрозрачности или видимости отсутствует, оно работает.
  • Событие webkitTransitionEnd не вызывается для свойства непрозрачности или видимости.

Есть ли обходной путь?

Ответы [ 2 ]

11 голосов
/ 22 мая 2012

С некоторыми незначительными изменениями свойства transition это может работать на iOS.На :hover ограничьте transition только свойством opacity, например: 

a:hover span {
    opacity:1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    visibility:visible;
}​

Хотя видимость является анимируемым свойством , похоже, что ошибка вреализация iOS.При попытке перехода visibility кажется, что весь переход не происходит.Если вы просто ограничите свой переход opacity, все будет работать так, как ожидалось.

Для ясности: Оставьте свойство visibility в своем CSS, просто не пытайтесь его преобразоватьесли вы хотите, чтобы все работало в Mobile Safari.

Для справки, вот ваше обновленное fiddle , которое я тестировал на iPad: 

a {
  background: gray;
  display: block;
  margin: 100px;
  padding: 100px;
}
a span {
  opacity: 0;
  -webkit-transition: 0.5s;
  visibility: hidden;
}
a:hover span {
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  visibility: visible;
}
<a href="#">a <span>span</span></a>
8 голосов
/ 25 февраля 2013

Только непрозрачность при переходе отстой.

После этого на iPhone вам нужно нажать, чтобы сфокусировать элемент, вот как я исправил свою проблему: 

.mydiv {
        visibility:hidden;
        opacity: 0;
        transition: all 1s ease-out; 
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
}
.mydiv:hover {
            visibility:visible;
            opacity: 1;
}
.mydiv:active {
            -webkit-transition: opacity 1s ease-out;
}

Я добавил переход непрозрачности в: active.

Таким образом, он работает со всеми анимациями перехода (учтите, что вы хотите применить анимацию к высоте или что-то еще) на Chrome, Firefox и iPhone (при нажатии).

Благодарю Греццо и Майкла Мартина-Смукера за то, что они заметили переход непрозрачности.

(копия / вставка моего ответа из Видимость CSS-анимации: видимая; работает в Chrome и Safari, но не в iOS )

...