CSS3 переходы отключены при использовании отображения: также нет - PullRequest
Новая
       4

CSS3 переходы отключены при использовании отображения: также нет

3 голосов
/ 07 сентября 2011

Кажется, я нашел недостаток с переходами CSS3.Надеюсь, что нет.Здесь дилемма.

.element a span {
   display:none;
   opacity:0;
   position:absolute;
   top:-10px;
   -webkit-transition-property:top, opacity;
   -webkit-transition-duration:500ms;

}
.element a:hover span {
   display:inline;
   opacity:0.8;
   position:absolute;
   top:10px;
}

Переход не работает, как это вообще.Если удалить атрибут display: none, он будет работать, однако в этом случае нам понадобится атрибут display: none в нашей ссылке, чтобы его нельзя было связать до наведения мыши.1007 * Marvelous

Ответы [ 4 ]

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

вы можете попробовать поставить overflow: скрытый на a, таким образом, диапазон должен выглядеть невидимым, без необходимости использовать display: none;когда вы переместили его на 10 пикселей вверх.

или вместо дисплея: нет;попробуйте использовать видимость: скрыто;

3 голосов
/ 24 мая 2013

Изменение отображения: ни один для отображения: встроенный делает другие свойства спорными, если речь идет о переходах.Поэтому отделите display: none / display: block change от смены класса, используя setTimeout.Браузер должен видеть их как отдельные изменения, чтобы применить ваш переход.К сожалению, я думаю, что это означает, что вы не можете просто использовать: hover, но вам понадобится обработчик событий JS для hover.

В частности, я бы использовал встроенный атрибут стиля style = "display: none", который вы добавляете илиудалите с помощью JS и возьмите display: none из таблицы стилей.

Затем в JS после удаления display: none (явно или через правило стиля псевдокласса: hover) используйте функцию setTimeout, которая явно добавляет /удаляет класс.Таким образом, изменение «this is display: inline» является дискретным, более ранним действием, которое можно рисовать из других изменений свойства стиля, к которым вы хотите применить правила перехода.

В обратном направлении измените класс обратнов обработчике событий и используйте функцию setTimeout, чтобы установить отображение: нет как встроенный стиль.Время ожидания должно совпадать с продолжительностью перехода курса (чтобы на дисплее не отображалось ничего после завершения перехода).

0 голосов
/ 27 августа 2013

Я бы пошел с JS.CSS-переходы сосут с высоты.Вот то, что я использовал, чтобы сделать функцию расширения клика, вы можете изменить несколько вещей и сделать то же самое при наведении курсора 

// Dropdown

$ (function () {

    // Target the ul sibling to keep it generic
    var selector = $('.dropdown article > ul').siblings().addClass('selector');

    selector.click(function(){
                var targetUl = $(this).siblings('ul');

                if (targetUl.hasClass('open')) {
                            targetUl.removeClass('open').slideUp();
                } else {
                            targetUl.slideDown().addClass('open');
                }
    });

});

0 голосов
/ 09 мая 2013

или вы можете попробовать использовать ширину или высоту 0 в сочетании с переполнением, скрытым на невидимом элементе, чтобы не мешать другим элементам при сохранении переходов.

т. 

.element a span {
   overflow: hidden;
   height: 0;
   width: 0;
   opacity:0;
   position:absolute;
   top:-10px;
   -webkit-transition-property:top, opacity;
   -webkit-transition-duration:500ms;

}
.element a:hover span {
   overflow: visible;
   height: ???px;
   width: ???px;
   opacity:0.8;
   position:absolute;
   top:10px;
}
...