Лучшая анимация для максимальной высоты CSS ТОЛЬКО - PullRequest
Новая
       7

Лучшая анимация для максимальной высоты CSS ТОЛЬКО

0 голосов
/ 28 марта 2020

Итак, я создал эту аккордеонную анимацию, CSS ТОЛЬКО

https://codepen.io/ziad-darwich/pen/ExjGxKx

body{
  margin:100px 300px
}
.accordion{
  max-width:400px;
}
.tabs{
  margin:5px 0;
}
.tab-heading{
  background-color:#092e3d;
  padding: 10px;
  border-radius:3px;
  font-size:.6em;
  color:#fff;
  cursor:pointer;
  display:block;
}
.tab-heading h2{
  pointer-events: none;
}
.tab-content {
  background: #f3f3f3;
  overflow-y: hidden;
  max-height:0;
  transition:max-height .5s ease-in-out;
}

.tab-content p{
  margin:20px;
}
input{
  display:none
}
input:checked + .tab-heading{
  border-radius: 3px 3px 0 0;
}
input:checked ~ .tab-content{
  max-height:200px;
  border-radius:0 0 3px 3px;
}
<div class="accordion">
  <div class="tabs">
    <input type="radio" name="tab" id="tab1" />
    <label class="tab-heading" for="tab1">
      <h2>Tab 1 Title</h2>
    </label>

    <div class="tab-content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus.
      </p>
    </div>
  </div>

  <div class="tabs">
    <input type="radio" name="tab" id="tab2" />
    <label class="tab-heading" for="tab2">
      <h2>Tab 2 Title</h2>
    </label>

    <div class="tab-content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Nullam consectetur justo ut rutrum venenatis. Maecenas id mollis quam, sit amet venenatis arcu.
      </p>
    </div>
  </div>

  <div class="tabs">
    <input type="radio" name="tab" id="tab3" />
    <label class="tab-heading" for="tab3">
      <h2>Tab 3 Title</h2>
    </label>

    <div class="tab-content">
      <p>
        Lorem ipsum dolor sit amet
      </p>
    </div>
  </div>
</div>

Как вы можете видеть, я анимирую максимальную высоту содержимого вкладки.

Итак, моя вещь в том, что если max-height очень большой, как максимальная высота: 1000 пикселей; закрывая вкладку, нужно время, чтобы начать, я полагаю, потому что она в основном оживляет 1000px; но я хочу, чтобы анимация запускалась сразу после ее запуска.

Спасибо

1 Ответ

0 голосов
/ 28 марта 2020

Добавьте задержку к transition открытия вкладки, чтобы открытая закрывалась немного раньше, а затем откроется следующая. 

body {
  margin: 100px 300px
}

.accordion {
  max-width: 400px;
}

.tabs {
  margin: 5px 0;
}

.tab-heading {
  background-color: #092e3d;
  padding: 10px;
  border-radius: 3px;
  font-size: .6em;
  color: #fff;
  cursor: pointer;
  display: block;
}

.tab-heading h2 {
  pointer-events: none;
}

.tab-content {
  background: #f3f3f3;
  overflow-y: hidden;
  max-height: 0;
  transition: max-height .5s ease-out;
}

.tab-content p {
  margin: 20px;
}

input {
  display: none
}

input:checked+.tab-heading {
  border-radius: 3px 3px 0 0;
}

input:checked~.tab-content {
  max-height: 200px;
  border-radius: 0 0 3px 3px;
  transition: max-height .5s ease-in-out .5s;
}
<div class="accordion">
  <div class="tabs">
    <input type="radio" name="tab" id="tab1" />
    <label class="tab-heading" for="tab1">
      <h2>Tab 1 Title</h2>
    </label>

    <div class="tab-content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Lorem
        ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus.
      </p>
    </div>
  </div>

  <div class="tabs">
    <input type="radio" name="tab" id="tab2" />
    <label class="tab-heading" for="tab2">
      <h2>Tab 2 Title</h2>
    </label>

    <div class="tab-content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Nullam consectetur justo ut rutrum venenatis. Maecenas id mollis quam, sit amet venenatis arcu.
      </p>
    </div>
  </div>

  <div class="tabs">
    <input type="radio" name="tab" id="tab3" />
    <label class="tab-heading" for="tab3">
      <h2>Tab 3 Title</h2>
    </label>

    <div class="tab-content">
      <p>
        Lorem ipsum dolor sit amet
      </p>
    </div>
  </div>
</div>

Обратите внимание, как я добавил другой переход для checked input. Я установил его на запуск после завершения анимации закрытия, но вы, очевидно, можете поиграть с этим.

РЕДАКТИРОВАТЬ: Переходы начинаются одновременно, что происходит в том, что он невидим, пока не достигнет реальной высоты элемента. Вот почему вы видите задержку.

Предположим, что ваш элемент имеет height из 100px и вы анимируете max-height с 200px до 0. Пока max-height не достигнет 100px, анимация не будет видна.

Чтобы элементы имели одновременный переход, вы должны анимировать height, а не max-height. Тогда вы все равно можете добавить max-height, но вы не сможете сохранить реальную высоту, и вместо этого у вас будет фиксированная высота. Предположим, что вы все еще хотите go CSS - только.

...