Анимация выпадающей вкладки - PullRequest
Новая
       56

Анимация выпадающей вкладки

1 голос
/ 13 июля 2020

Я пытаюсь воспроизвести веб-страницу (https://climate-science.com/contact/), используя CSS, HTML и JS. Я новичок в этих трех языках, и у меня возникают проблемы с воспроизведением раздела часто задаваемых вопросов. У меня проблемы с анимацией, есть помощь?

Пока что у меня есть это в файле HTML (на 1 вопрос): container »класс содержит стиль для серого поля, а« element-tab-title »содержит только отступы для текста внутри. Вот результат, который у меня есть на данный момент: Фотография раздела FAQ

Любая помощь по созданию анимации будет принята с благодарностью.

Ответы [ 2 ]

0 голосов
/ 14 июля 2020

Если вам нужен действительно быстрый маршрут, HTML5 поддерживает аккордеоны без JS. Они не анимированы, но их легко стилизовать и семантически легко понять (так что они удобны для доступности прямо из коробки). 

<details>  
  <summary>Section 1</summary>  
  <h3>This is section 1</h3>  
</details>  
<details>  
  <summary>Section 2</summary>  
  <h3>This is section 2</h3>  
</details>  
<details>  
  <summary>Section 3</summary>  
  <h3>This is section 3</h3>  
</details>
0 голосов
/ 13 июля 2020

Обычно какой-нибудь простой Javascript будет использоваться для переключения скрытия / отображения содержимого 'body'.

Ваше содержимое 'body' в настоящее время находится в вашем теге <p>, обычно для скрытого CSS по умолчанию, обычно с display:none.

Затем с Javascript вы должны установить прослушиватель событий на «смотреть» для действий при наведении курсора или щелчка от пользователя, когда вы затем измените CSS в «содержимом», чтобы снова быть видимым с другим типом отображения - обычно display:block.

Вот начальная ссылка на Javascript слушателей событий: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

Как предложил пользователь Geat, вам следует взглянуть на Accordions во внешних фреймворках. Я бы посоветовал взглянуть на Bootstrap framework Accordions (например, https://getbootstrap.com/docs/4.3/components/collapse/#accordion -example ), где вы можете увидеть часть кода и посмотреть, как он работает.

Кроме того, попробуйте узнать, как использовать инструменты / инспектор разработчика вашего браузера для просмотра кода во время его рендеринга. Это особенно полезно, когда вы пытаетесь увидеть, как работает живой фрагмент кода, как в вашем случае.

...