Как я могу анимировать скрытие блока?

Question

[Roderen]

Можно заметить, что появление блока анимировано, а вот удаление происходит резко. Как это исправить?

Comments

[ForSureN1]

какого блока ?

Answer 1

[ForSureN1]

let animateBlock = content.animate([{opacity: '1'}, {opacity: '0'}],{duration: 200, easing: 'ease-in', fill: 'forwards'})
animateBlock.addEventListener('finish', () => { content.style.display = 'none' })

Comments

[Roderen]

Извини, но не совсем пойму куда его вставлять. Вместо content.style.display = 'none'; попробовал и просто блоков нет.

[ForSureN1]

Roderen, Если честно, я не до конца понимаю что вы хотите, про какой блок идет речь

[Roderen]

ForSureN1, choise__tab-info

[ForSureN1]

Roderen, а вы же понимаете что если вы поставите анимацию исчезновения с transition, то когда вы переключите таб, начнёт срабатывать и анимация появления, и анимация исчезновения, и на несколько долю секунд 2 блока информации будут друг на друге ? поэтому я не вижу никакого смысла в данной ситуации делать анимацию на исчезновение контента, другое дело когда он появляется, да, нужна плавность, а вот с исчезновением нет

[Roderen]

ForSureN1, Понял, спасибо :)

[ForSureN1]

Roderen, Просто я вам объясню почему это так происходит, а дальше вам решать что с этим делать, для того чтобы работал transition, нужно использовать свойства, которые имеют единицу измерения, по типу: color, px, не могу сейчас вспомнить как эти состояния называются. а свойство display не имеет такой единицы, поэтому для него transition и не работает, иными словами у display есть только 2 свойства display: block, display: none.
а у того же font-size: 30px и font-size: 50px, есть промежуток в 20px, поэтому на нем сработает transition.
Надеюсь понятно объяснил :)