CSS-переход мерцает при зависании

Удивительно, что вы используете свое драгоценное время, чтобы прочитать мой вопрос!CSS-переход мерцает при зависании

Я пытаюсь перевернуть div на зависании. Все идет хорошо, но оно мерцает во время перехода. Похоже, что он много раз перелистал! Это разрушает весь эффект флип. Далее следует мой код и скрипку:

скрипку: FIDDLE

И для CSS:

.rotate { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    transition: all 0.3s; 
    padding:20px; 
    background-color: #333; 
    width: 200px; 
    text-align: center; 
    margin: 0 auto; 
    font-family: sans-serif; 
    color: #FFFFFF; 
    border-top: #E9F01D 3px solid; 
} 
.rotate:hover { 
    letter-spacing: 5px; 
    color: #E9F01D; 
    cursor: pointer; 
    -ms-transform: rotatex(360deg); 
    -webkit-transform: rotatex(360deg); 
    transform: rotatex(360deg); 
}

Является ли это фликкер эффект можно предотвратить или нет? Если да, то как мне это сделать?

Заранее благодарен!

источник

2014-09-29 Wijnand M

попробуйте добавить этот> -webkit-отсев-видимость: скрытый; – webkit

Кажется, что когда вы наводите и сворачиваете div, указатель мыши покидает div (потому что он сжимается), заставляя его расти снова, пока ваш указатель мыши не коснется его снова. Возможное решение может заключаться в том, чтобы установить: наведите указатель на родительский элемент – fboes

@fboes Не приведет ли к такому же эффекту на родительский элемент? Я все равно попробую, просто интересно .. –

Как уже упоминалось в комментариях:

Главная беда в том: В то время как парит над движущейся (или анимированный) DIV, вы можете просто не по-парение из элемента, потому что она движется под курсором.

Решение: Установите парения-селектор на содержащий элемент, который не изменяет его размер в то время как вы наведете:

Example Here.

.rotate { 
 
    width: 200px; height:80px; 
 
    background:green; 
 
} 
 

 
.rotate .rotate-inner { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
    
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
     -ms-transition: all 0.3s; 
 
      transition: all 0.3s; 
 
    
 
    padding:20px; 
 
    background-color: #333; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    font-family: sans-serif; 
 
    color: white; 
 
    border-top: #E9F01D 3px solid; 
 
} 
 

 
.rotate:hover .rotate-inner { 
 
    letter-spacing: 5px; 
 
    color: #E9F01D; 
 
    cursor: pointer; 
 
    
 
    -webkit-transform: rotatex(360deg); 
 
    -moz-transform: rotatex(360deg); 
 
     -ms-transform: rotatex(360deg); 
 
      transform: rotatex(360deg); 
 
}

<div class="rotate"> 
 
    <div class="rotate-inner">HOVER ME</div> 
 
</div>

источник

2014-09-29 15:44:32 fboes

CSS-переход мерцает при зависании

ответ

Смежные вопросы