CSS Expand / Контрактная анимация для отображения / скрытия содержимого

Question

CSS Expand / Контрактная анимация для отображения / скрытия содержимого

1

Я пытаюсь создать коробку, которая может расширяться и сворачиваться с помощью простой анимации скольжения. Если вы выполните приведенный ниже пример, идея состоит в том, что он начинается с одной красной строки, и когда вы нажимаете кнопку, она разделяется на две строки для чтения и аккуратно расширяется, чтобы показать содержимое, например, вытягивая ничью из таблицы.

Я пробовал преобразовать, анимацию, относительную: позиционирование с вершиной, и я не могу получить желаемый эффект.

Содержащая коробка должна расширяться по размеру

function expandContract() {
   const el = document.getElementById("expand-contract")
   el.classList.toggle('expanded')
   el.classList.toggle('collapsed')
}

#container {
   border: 1px solid black;
   padding: 15px;
}

#top-section {
  border-bottom: 1px solid red;
}

#expand-contract {
  border-bottom: 1px solid red;
}

.expand-contract {
   transform: translateY(-100%)
   overflow: hidden;
}

@keyframes slide-in {
    100% {
        transform: translateY(0%)
    }
}

.expanded {
   background-color: green;
   animation-name: slide-in;
   animation-duration: 1s;
}

.collapsed {
   background-color: red;
   transform: translateY(-100%)
}

<div id="container">
  <div id="top-section">
    This is always displayed
  </div>
  
  <div id="expand-contract" class="expanded">
    This section expands and contracts
  
    <table>
      <tr><td>test1</td></tr>
      <tr><td>test2</td></tr>
      <tr><td>test3</td></tr>
      <tr><td>test4</td></tr>
    </table>
  </div>
  
  <div id="bottom-section">
    This section is always displayed
  </div>
</div>

<button onclick="expandContract()">Expand/Contract</button>

Tony J Watson 08 янв. 2018, в 03:46

Источник

Теги:

javascript

css

css3

2 ответа

0

надеюсь помочь вам

HTML

<div class="container">
    <div id="top-section">
      This is always displayed
    </div>
   <div id="expand-container">
    <div class="expanded" id="expand-contract">
         <table>
            <tr><td>test1</td></tr>
            <tr><td>test2</td></tr>
            <tr><td>test3</td></tr>
            <tr><td>test4</td></tr>
        </table>
    </div>
  </div>
</div>
<button class="header" onclick="expandContract()">Expand/Contract</button>

CSS

.container {
    width:100%;
    border:1px solid #d3d3d3;
}
.container div {
    width:100%;
}
.header {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.container .expanded {
    display: none;
    padding : 5px;
}

JS

function expandContract() {
    $header = $(".header");
    $content = $("#expand-contract")
    $content.slideToggle(500, function () {
        $header.text(function () {
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });
};

здесь здесь введите код

AirBlack 08 янв. 2018, в 01:30

Ещё вопросы

smashed-potatoes · Accepted Answer · 2018-01-08T01-17-00.000Z

Вы можете добиться этого, используя transition CSS вместе с измененными стилями. Первоначально вы можете подумать о переходе высоты (от 0 до initial чтобы она динамически расширялась по высоте), но, к сожалению, transition CSS не справляется с этим.

Вместо этого вы можете обернуть его в контейнер с overflow: hidden а затем использовать margin-top: -100% чтобы скрыть его, и 0 чтобы показать его.

Вот ваш код с этой модификацией:

function expandContract() {
   const el = document.getElementById("expand-contract")
   el.classList.toggle('expanded')
   el.classList.toggle('collapsed')
}

#container {
   border: 1px solid black;
   padding: 15px;
}

#top-section {
  border-bottom: 1px solid red;
}

#expand-container {
  overflow: hidden;
}

#expand-contract {
  border-bottom: 1px solid red;
  margin-top: -100%;
  transition: all 1s;
}

#expand-contract.expanded {
   background-color: green;
   margin-top: 0;
}

<div id="container">
  <div id="top-section">
    This is always displayed
  </div>
  
  <div id="expand-container">
    <div id="expand-contract" class="expanded">
      This section expands and contracts
  
      <table>
        <tr><td>test1</td></tr>
        <tr><td>test2</td></tr>
        <tr><td>test3</td></tr>
        <tr><td>test4</td></tr>
      </table>
    </div>
  </div>
  
  <div id="bottom-section">
    This section is always displayed
  </div>
</div>

<button onclick="expandContract()">Expand/Contract</button>

Когда я сжимаю коробку и затем нажимаю «развернуть», перед расширением возникает задержка в 1000 мс. Есть идеи, что могло бы вызвать это?
переход: все 1 с >> добавляет задержку в 1 секунду .. изменил это на переход: 1 с все 0 с; чинить