Как я могу полностью отключить переход для popover?

Question

Я знаю, что могу использовать hoverOpenDelay={0} а также hoverCloseDelay={0}, но все еще есть переход непрозрачности 100 мс на контейнере popover, который я не могу изменить, насколько я могу судить. Я хотел бы удалить этот переход, чтобы всплывающее окно появлялось мгновенно.

Спасибо за помощь!

Answer 1

Это довольно сложно. План использует react-addons-css-transition-group библиотека, которая добавляет -enter, -appear, -leave, -enter-active, -appear-active, -leave-active суффиксы к некоторым именам классов элементов, которые нужно анимировать. В вашем случае вам, вероятно, нужно вручную переопределить стили наложения, например, что-то вроде этого:

.pt-overlay-enter,
.pt-overlay-appear {
  opacity: 0;
}

.pt-overlay-enter-active,
.pt-overlay-appear-active {
  opacity: 1;
  transition-property: opacity;
  // `step` didn't work cross browser for me
  transition-timing-function: ease; 
  // i've found 0ms is causes react-addons-css-transition-group to fire events unreliable on certain browsers
  transition-duration: 1ms
  transition-delay: 0;
}

Конечно, вы захотите сузить область действия этих правил, чтобы они применялись только к всплывающим окнам, для которых вы хотите удалить анимацию.

Если вы хотите увидеть, что именно blueprint занимается стилизацией классов жизненного цикла анимации, ознакомьтесь со стилями здесь. react-transition Здесь используется миксин (среди других мест).