it-swarm.com.ru

Отображение/скрытие строк таблицы с переходами css3

На одной части моей страницы я использую переходы css3, чтобы показать/скрыть некоторые div с эффектом скользящего Nice

.service_status {
        max-height: 0;
    -webkit-transition: max-height 1s ease-in-out;
    -moz-transition: max-height 1s ease-in-out;
    -ms-transition: max-height 1s ease-in-out;
    -o-transition: max-height 1s ease-in-out;
    transition: max-height 1s ease-in-out;
}

.service_status.open {
    max-height: 500px;
    -webkit-transition: max-height 1s ease-in-out;
    -moz-transition: max-height 1s ease-in-out;
    -ms-transition: max-height 1s ease-in-out;
    -o-transition: max-height 1s ease-in-out;
    transition: max-height 1s ease-in-out;
}

Я хотел бы использовать ту же технику в некоторых строках таблицы, но max-height и height не оказывают никакого влияния (я думаю, из-за спецификаций CSS для таблиц). Есть ли способ показать/скрыть строки таблицы с анимацией, используя только переходы CSS3 и без js?

20
wheresrhys

Обновление:

На самом деле мой предыдущий ответ отвечает на вопрос! Но не совсем явно. Это как: «Эй, идея здесь, просто примените ее, где хотите». Я думал, что суть решения была ясна, и любой мог бы использовать его ... Но в любом случае, я изложу всю идею, самым понятным способом, и смогу применить решение к простому. таблица (так как OP не показывает никакой структуры).


Решение:

Укороченная версия:

Используя Div для упаковки содержимого в ячейку, мы можем использовать свойство max-height, а также переход max-height. С помощью специальной кривой перехода мы можем «замаскировать» задержку использования высокой максимальной высоты.

Демо здесь: http://jsfiddle.net/1rnc9bbm/4/


Длинная версия:

Вся проблема в том, что высота ячейки таблицы является минимальной, чтобы соответствовать ее содержимому, а высота строки таблицы - это минимальная высота, необходимая для всех ячеек (поэтому высота строки таблицы - это минимальная высота, требуемая самой высокой ячейкой ).

От W3 (около высоты ячеек стола):

В CSS 2.1 высота ячейки является минимальной высотой, необходимой для содержимого.

От W3 (О высоте таблицы-строки):

Высота поля элемента «таблица-строка» вычисляется, как только пользовательский агент имеет все доступные ячейки в строке: это максимум вычисленной «высоты» строки, вычисленной «высоты» каждой ячейки в строке, и минимальная высота (MIN), требуемая ячейками.

При этих обстоятельствах наш единственный выбор - ограничить высоту косвенно, используя внутреннюю разметку, обычно элемент div. Поскольку элемент Div учитывает максимальную высоту, он будет растягивать наше содержимое, и наша ячейка таблицы будет также уважать «максимальную высоту div», потому что это вся необходимая высота, в которой он нуждается.

Проблема с переходом на максимальную высоту - это только задержка, вызванная тем, как рассчитывается переход. В таблице, как правило, вы отображаете динамическое содержимое, которое имеет динамическую и непредсказуемую длину (которая становится высотой ячейки таблицы), поэтому мы не знаем точную максимальную высоту, которая понадобится нашей таблице, чтобы точно соответствовать расширенному содержимому. Таким образом, нам нужно установить более высокую максимальную высоту, которая будет больше необходимой для некоторых ячеек. Когда это происходит, наш переход вычисляется неправильно (на основе максимальной высоты, а не общей высоты, которая будет показана/анимирована), и анимация становится странной и неточной. Чтобы показать пользователю плавный и плавный переход, я нашел блестящее решение с использованием пользовательской кривой перехода. Более подробная информация об этой проблеме и ее решении в конце этого ответа.

Итак, у нас есть «уважающий элемент max-height», плавный переход для нашей анимации max-height и таблица… Теперь пришло время собрать все воедино:


Html:

<table>
    <tr>
        <td>
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac lorem ante. Vestibulum quis magna pretium, lacinia arcu at, condimentum odio. Ut ultrices tempor metus, sit amet tristique nibh vestibulum in. Pellentesque vel velit eget purus mollis placerat sed sit amet enim. Sed efficitur orci sapien, ac laoreet erat fringilla sodales.
            </div>
        </td>
    </tr>
</table>

Css:

table{
    border: 1px solid #ddd;
}


div{
    background-color: #ddd;
    width: 400px;

    overflow: hidden;
    -webkit-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
    -moz-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
    transition: max-height 1.5s ease cubic-bezier(0, 1.05, 0, 1);

    max-height: 38px;
}

div:hover{
    -webkit-transition: max-height 2s ease;
    -moz-transition: max-height 2s ease;
    transition: max-height 2s ease;

    max-height: 400px;
}

Простая демонстрация здесь (код, показанный выше): http://jsfiddle.net/1rnc9bbm/3/ , и более полная (и общая) демонстрация таблицы здесь: http://jsfiddle.net/1rnc9bbm/4/

Я не думаю, что отрицательные оценки были справедливыми, но я согласен с тем, что эта версия сейчас гораздо более полная и дает четкий ответ на вопрос ФП. Если у вас есть какие-либо вопросы или вопросы, которые я хочу уточнить, вам не нужно понижать голос (пожалуйста), просто спросите/прокомментируйте выше. Я буду очень рад помочь, если смогу.

Obs: OP не предоставил Html, ни детали о таблице, которую он хочет расширить, так что все мое решение основано на обычном использовании таблицы.


Предыдущий (Оригинал) Ответ:

Я только что ответил на эту точно ситуацию в другом вопросе здесь. И в моем конкретном случае мне нужно было сделать именно то, что Ты сказал. У меня есть таблица, и я хочу развернуть строку таблицы, когда пользователь наводит на нее курсор.

Тот же ответ относится к вашему вопросу:
https://stackoverflow.com/a/27773588/3395460


Связанный ответ (плавные переходы с более высоким значением Max-Height, чем необходимо для контейнера):

Как указал @maskacovnik, это будет более полный (и интегральный) ответ, если он также содержит код моего первого ответа, а также код, объясняющий часть решения моего обновленного ответа. Вот:

[...] Мне нужно было показать подробности режима описания продукта в таблице ячеек, когда пользователь наводит курсор на ячейку. Без наведения пользователя отображаются только максимум 2 строки описания. После того, как пользователь наведет курсор мыши, все строки (текст может быть длиной от 1 до 8 строк, динамической и непредсказуемой длины) должны отображаться с некоторой анимацией высоты.

Я прихожу к той же самой дилемме и выбираю использовать переход max-height (устанавливая высокую max-height, которая, я был уверен, не обрежет мой текст), потому что этот подход представляется мне самым чистым решением для анимации рост.

Но я не мог быть доволен задержкой анимации «скольжения», как и вы…. Именно тогда я нашел комментарий о переходной кривой здесь: http://css3.bradshawenterprises.com/animating_height/ .Идея этого парня блестящая, но только это решение само по себе «обрезает» эффект «скользящей вниз» анимации. Поэтому, подумав немного, я просто прихожу к окончательному решению.

Итак, вот мое решение, использующее идею Риса (парень по ссылке выше):.

Анимация скольжения (Hover) с «плавным ростом» и анимация скольжения без (практически) «задержки»:

div { background-color: #ddd; width: 400px; overflow: hidden; -webkit-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1); -moz-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1); transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1); max-height: 38px; } div:hover { -webkit-transition: max-height 2s ease; -moz-transition: max-height 2s ease; transition: max-height 2s ease; max-height: 400px; } <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac lorem ante. Vestibulum quis magna pretium, lacinia arcu at, condimentum odio. Ut ultrices tempor metus, sit amet tristique nibh vestibulum in. Pellentesque vel velit eget purus mollis placerat sed sit amet enim. Sed efficitur orci sapien, ac laoreet erat fringilla sodales. </div>

.


Hope I helped!

12
Vitox

Нельзя применять переходы по высоте к элементам <td> или <tr>. Однако, если вы можете обернуть содержимое элементов <td> с помощью <div>, вы можете применить переходы CSS к элементам <div>.

HTML:

<tr>
  <td><div>Contents</div></td>
  <td><div>Contents</div></td>
</tr>

CSS:

tr div {
  max-height:0;
  transition: max-height 1s ease-in-out;
}
tr.open div {
  max-height: 500px;
}
8
Tzach

Line Height: здесь вы идете.

var doc = document;
var myElements = doc.querySelectorAll("[data-row='047384']");

if(myElements.length > 0){
  myElements[0].addEventListener("click", function(){
    showRows(myElements);
  });
}

function showRows(elements){
  for (var i = 0; i < elements.length; i++) {
    if(elements[i].tagName.toLowerCase() !== 'button'){
      elements[i].classList.toggle('show');
    }
  }
}
.table-part-row{
  line-height:0;
  transition: 0.2s;
  opacity: 0;
}
.table-part-row.show {
  line-height:1em;
  opacity: 1;

}
<br>
<table>
  <tr>
    <th></th>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr data-row="047384">
    <td><button data-row="047384">????</button></td>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr class="table-part-row" data-row="047384">
    <td></td>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr class="table-part-row" data-row="047384">
    <td></td>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

5
Ron Royston

Я нашел один способ скрыть строку таблицы с помощью css, которая работает для простого текста без добавления этих мерзких div'ов. Это не «делает все, исправляет все» решение, но вы можете попробовать его, если вы имеете дело только с текстом в ваших таблицах.

(Это может работать и для другого контента, но я не проверял это)

  

// just used to toggle the hide class - use what every you fancy
$('button').click(function(){ $('.toggle').toggleClass('hide'); });
td {
  opacity: 1;
  padding: 10px;
  line-height: 20px;
  transition: all 0.2s ease-in-out;
} 
.hide td {
  opacity: 0;
  line-height: 0px;
  padding: 0 10px;
}

/* just some basic setup */
table {
  border-collapse: collapse;
}
td {
  background: #f1f1f1;
}
tr:nth-child(odd) td {
  background: #f9f9f9;
}
<button>Toggle Table Row</button>
<br /><br />

<table>
<tr>
  <td>foo</td>
</tr>
<tr class="toggle">
  <td>Hide Me!</td>
</tr>
<tr>
  <td>foo</td>
</tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

0
Tim Schoch

Я только что натолкнулся на то же самое, и моим решением было использовать div в ячейке, но для анимации я использовал внутренние div и margin-bottom вместо max-height. Подрезанный будет:

hTML:

<tr><td colspan="7">
  <div class="content">
    <div class="amin">
        multi line text
    </div>
   </div>
</td></tr>

cSS:

.content {
    overflow: hidden:
    margin: 0;
    float: left;
}
.anim {
    margin-bottom: -50%; /*use calc() to whatever suits you*/
    transition: all 5s;
}
.content:hover anim {
    margin-bottom: 0;
}

Я тестировал только в FF.

0
ot_ik_