БЛОГ НА HUSL


Как анимировать тег
и его элементы?

Автор вопроса: BlackStar1991

Мой вопрос базируеться на вот этой статье. Разработчики применяют хак, чтобы сделать эффект скрытия содержимого тега <details> через CSS. Вот пример реализации на codepen но в мойом случаии что-то идет не так.

.accordion .services_item {
  margin: 0 0 15px;
}

.accordion .title {
  cursor: pointer;
  font-weight: 500;
  font-size: 18px;
  line-height: 120%;
  color: #1F1D2E;
  margin: 0 0 10px;
}

.accordion .description {
  color: #888399;
  font-size: 16px;
  line-height: 150%;
  margin-left: 40px;
  max-height: 0px;
  overflow: hidden;
  box-sizing: border-box;
  transition: max-height 400ms ease-out;
  transition-delay: 50ms;
}

.services_item .arrow-services {
  transition: transform .4s ease;
  transition-delay: 0s;
  transform: rotate(0deg);
  margin-right: 24px;
}

.services_item[open]>summary .arrow-services {
  transform: rotate(-90deg);
}

.accordion .services_item[open]>.description {
  max-height: 200px;
  transition: max-height 400ms ease-out;
}

.accordion-item {
  width: calc(33% - 15px);
}

.we-help-you-accordion_corrected .title-text {
  display: flex;
  align-items: center;
  width: 100%;
  color: #3744B9;
  border-radius: 6px;
  background: #F3F6FF;
  font-size: 16px;
  line-height: 120%;
  padding: 15px;
}

.we-help-you-accordion_corrected .services_item .arrow-services {
  transform: rotate(-90deg);
}

.we-help-you-accordion_corrected .services_item[open]>summary .arrow-services {
  transform: rotate(0deg);
}

.we-help-you-accordion_corrected .accordion .services_item .description {
  margin-left: 15px;
}

summary {
  list-style: none;
}

details[open] summary::before {
  content: "";
}
<div class="accordion">
  <details class="services_item" open="">
    <summary class="title collapsed">
      <span class="title-text">
       <svg class="arrow-services" width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.2492 12.0008C13.0502 12.0008 12.8595 11.9218 12.7188 11.7812C12.5782 11.6405 12.4992 11.4497 12.4992 11.2508V7.05834L6.28166 13.2833C6.14043 13.4246 5.94889 13.5039 5.74916 13.5039C5.54944 13.5039 5.35789 13.4246 5.21666 13.2833C5.07543 13.1421 4.99609 12.9506 4.99609 12.7508C4.99609 12.5511 5.07543 12.3596 5.21666 12.2183L11.4417 6.00084H7.24916C7.05025 6.00084 6.85948 5.92182 6.71883 5.78117C6.57818 5.64052 6.49916 5.44975 6.49916 5.25084C6.49916 5.05192 6.57818 4.86116 6.71883 4.72051C6.85948 4.57985 7.05025 4.50084 7.24916 4.50084H13.2492C13.4481 4.50084 13.6388 4.57985 13.7795 4.72051C13.9201 4.86116 13.9992 5.05192 13.9992 5.25084V11.2508C13.9992 11.4497 13.9201 11.6405 13.7795 11.7812C13.6388 11.9218 13.4481 12.0008 13.2492 12.0008Z" fill="#3744B9"></path></svg>
        Gain Visibility into Your IT Infrastructure </span>
    </summary>

    <div class="description">
      Our comprehensive infrastructure assessments and optimization services enable you to detect and address process deficiencies while minimizing potential IT risks, including software or hardware failures, capacity constraints, and data loss. </div>
  </details>
</div>

  1. Первая проблема - Почему закрытие <div class="description"> происходит без анимации, хотя в примере на кодепен, там идет с анимацией. Что я делаю не так ? (Пробовал transition-delay: 50ms; но тут это ни на что не влияет)
  2. Вторая проблема - Почему анимация поворота маркера происходит ПОСЛЕ того как контент скроеться, а не одновременно с анимацией схлопывания ? Можно ли это поправить ?

------- Альтернативный вариант с выносом элемента вне блока details

   .accordion .services_item {
  margin: 0 0 15px;
 background-color: #777; 
}

.accordion .title {
  cursor: pointer;
  font-weight: 500;
  font-size: 18px;
  line-height: 120%;
  color: #1F1D2E;
  margin: 0 0 10px;
}

.accordion .description {
  color: #888399;
  font-size: 16px;
  line-height: 150%;
  margin-left: 40px;
  max-height: 0px;
  overflow: hidden;
  box-sizing: border-box;
  transition: max-height 400ms;
  transition-delay: 50ms;
}

.services_item .arrow-services {
  transition: transform .4s;
  transform: rotate(0deg);
  margin-right: 24px;
}

.services_item[open]>summary .arrow-services {
  transform: rotate(-90deg);
}

.accordion .services_item[open] + .description {
  max-height: 200px;
  transition: max-height 400ms;
}

.accordion-item {
  width: calc(33% - 15px);
}

.we-help-you-accordion_corrected .title-text {
  display: flex;
  align-items: center;
  width: 100%;
  color: #3744B9;
  border-radius: 6px;
  background: #F3F6FF;
  font-size: 16px;
  line-height: 120%;
  padding: 15px;
}

.we-help-you-accordion_corrected .services_item .arrow-services {
  transform: rotate(-90deg);
}

.we-help-you-accordion_corrected .services_item[open]>summary .arrow-services {
  transform: rotate(0deg);
}

.we-help-you-accordion_corrected .accordion .services_item .description {
  margin-left: 15px;
}

summary {
  list-style: none;
}

details[open] summary::before {
  content: "";
}
<div class="accordion">
  <details class="services_item">
<summary class="title collapsed">
  <span class="title-text">
    <svg class="arrow-services" width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M13.2492 12.0008C13.0502 12.0008 12.8595 11.9218 12.7188 11.7812C12.5782 11.6405 12.4992 11.4497 12.4992 11.2508V7.05834L6.28166 13.2833C6.14043 13.4246 5.94889 13.5039 5.74916 13.5039C5.54944 13.5039 5.35789 13.4246 5.21666 13.2833C5.07543 13.1421 4.99609 12.9506 4.99609 12.7508C4.99609 12.5511 5.07543 12.3596 5.21666 12.2183L11.4417 6.00084H7.24916C7.05025 6.00084 6.85948 5.92182 6.71883 5.78117C6.57818 5.64052 6.49916 5.44975 6.49916 5.25084C6.49916 5.05192 6.57818 4.86116 6.71883 4.72051C6.85948 4.57985 7.05025 4.50084 7.24916 4.50084H13.2492C13.4481 4.50084 13.6388 4.57985 13.7795 4.72051C13.9201 4.86116 13.9992 5.05192 13.9992 5.25084V11.2508C13.9992 11.4497 13.9201 11.6405 13.7795 11.7812C13.6388 11.9218 13.4481 12.0008 13.2492 12.0008Z" fill="#3744B9"></path>
    </svg>
    Gain Visibility into Your IT Infrastructure </span>
</summary>
  </details>
  <div class="description">
Our comprehensive infrastructure assessments and optimization services enable you to detect and address process deficiencies while minimizing potential IT risks, including software or hardware failures, capacity constraints, and data loss. </div>
</div>


Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.