CSS3 переходы + не отображать ничего + предотвратить переброс - PullRequest
Новая
       7

CSS3 переходы + не отображать ничего + предотвратить переброс

4 голосов
/ 28 сентября 2011

Так что, если вы еще не знакомы, переходы CSS3 не анимируют display: none, так как он полностью удаляет целевой элемент из DOM. Так вот моя проблема. У меня есть боковая панель с большими всплывающими окнами, которые появляются при наведении курсора. К сожалению, поскольку я могу переходить только на visibility: hidden и opacity: 0, у меня избыточная прокрутка из-за видимых скрытых элементов div, включенных в макет, и, следовательно, очень длинное всплывающее окно, которое учитывается на полосе прокрутки страницы.

В поисках креативных решений для анимации, пока не прокручена полоса прокрутки.

Я занимаюсь локальной разработкой, поэтому у меня нет живого примера для показа, но вы можете увидеть проблему в этом скриншоте: http://dreamstarstudios.com/screencasts/2011-09-27_2111.swf

Заранее спасибо!

1 Ответ

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

Я предполагаю, что ваше всплывающее окно абсолютно позиционировано, поэтому вы можете сделать следующее:

  1. Пока оно скрыто, установите для всплывающего окна top огромное отрицательное значение.Это убирает его с экрана и избавляет от полосы прокрутки.
  2. При наведении установите top на правильное значение и передайте значение opacity.
  3. Убедитесь, что ваш CSStransition правила предназначены только для свойства opacity.

HTML 

<a href="">Popup go now</a>
<div class="popup">
    My cat's breath smells like cat food...
</div>

CSS 

.popup {
   position: absolute;
   top: -2000px;
   opacity: 0;

   transition: opacity 1s ease-in-out;
}

a:hover + .popup,
.popup:hover {
   top: 30px;
   opacity: 1;   
}

Вот выше в действии .

Обновление : чтобы добавить левое колебание и очистить анимацию мышки, вы можете использовать следующий код:

.popup {
   position: absolute;
   top: -2000px;
   width: 300px;
   left: 0;
   opacity: 0;

   /* Animate opacity, left and top  
      opacity and left should animate over 1s, top should animate over 0s
      opacity and left should begin immediately.  Top should start after 1s. */
   transition-property: opacity, left, top;
   transition-duration: 1s, 1s, 0s;
   transition-delay: 0s, 0s, 1s;
}

a:hover + .popup,
.popup:hover {
   top: 30px;
   left: 30px;
   opacity: 1;  

   /* All animations should start immediately */
   transition-delay: 0s;
}

Это делается следующим образом:

  1. Указана анимация для нескольких свойств (непрозрачность, слева, сверху).
  2. transition-delay предотвращает верхнююзначение изменяется до тех пор, пока анимация непрозрачности и левой анимации не будет завершена.Хитрость здесь в том, что когда элемент равен :hover, задержки нет (непрозрачность, левая и верхняя анимации начинаются сразу).Однако, когда :hover больше не активен, верхняя анимация ждет 1 секунду перед запуском.Это дает непрозрачность и оставляет достаточно времени для завершения.

Вот обновленный пример .

...