#reactjs #animation #styled-components
#reactjs #Анимация #styled-components
Вопрос:
Я пытаюсь создать соответствие с react и styled-components.
Я пытаюсь изменить display: none на display: block и добавить переход, но он изменяется без перехода, он работает нормально, только если я удаляю свойство display в styled-component, но я могу видеть часть div, если я удалю это свойство.Извините за мой английский и спасибо
Ответ №1:
Я думаю, что ваша проблема была в этой части css
const AcordionItemWrapper = styled.div`
width: 100%; // This is now 100% and not 80%
height: auto;
overflow: hidden;
background-color: blue;
`;
И это изменение приводит к такому результату.
Это гарантирует, что ваша darkgoldenrod вкладка занимает 100% ширины контейнера. Когда он активен, выпадающий список также равен 100%.
После дальнейшего изучения я обнаружил вашу проблему. Некоторые проблемы с разметкой, плюс браузер применяет поля по умолчанию к определенным элементам html. В этом случае к абзацу применяется поле по умолчанию. цвет фона игнорируется при использовании поля.
Приведенная ниже ссылка должна быть тем, что вы хотите.
Комментарии:
1. все в порядке, но я не могу видеть переход, как будто он вообще не переходит, не знаю, нужно ли мне играть с интервалами или что-то в этом роде.
2. Не могли бы вы, пожалуйста, подробнее объяснить / описать, какую анимацию следует выполнять?
3. У меня есть переход на AcordionItemPanel, но он не выполняет анимацию, он просто появляется и исчезает.
4. Мы говорим о методе
changeAcordionState? Судя по размещенной ссылке, я ожидаю, что вкладка accordion будет вести себя так. Можете ли вы описать, что должна делать анимация?5. да, я пытаюсь воспроизвести это w3schools.com/howto/howto_js_accordion.asp