Встраивание веб-страницы с d3 в блестящий [дубликат]

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

Я выполнил эффект, полностью установив оба <div> s и установив скрытый на opacity: 0.

Если вы даже переключили свойство display с none на block, ваш переход на другие элементы не будет происходить.

Чтобы обойти это, всегда позволяйте элементу быть display: block, но скройте элемент, настроив любое из этих средств:

1. Установите height на 0.
2. Установите для параметра opacity значение 0.
3. Поместите элемент вне рамки другого элемента который имеет overflow: hidden.

Возможны больше решений, но вы не можете выполнить переход, если вы переключите элемент на display: none. Например, вы можете попробовать попробовать что-то вроде этого:

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0; 
}
div.active {
    opacity: 1;
    display: block;
}

Но это не сработает. По моему опыту, я нашел это, чтобы ничего не делать.

Из-за этого вам всегда нужно сохранить элемент display: block, но вы можете обойти его, сделав что-то вроде этого:

div {
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}