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

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

.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?

ОТВЕТЫ

Ответ 1

Update:

На самом деле мой предыдущий ответ ОТВЕТ ОТВЕТ! Но не совсем ясно. Это похоже на: "Эй, идея здесь, просто применяй ее везде, где хочешь". Я думал, что суть решения ясна, и кто-нибудь сможет его использовать... Но каким-то образом я разоблачу всю идею, самым ясным образом, я смогу, а также применим решение к простому table (поскольку OP не показывает никакой структуры).


Решение:

Краткая версия:

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

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


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

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

Из W3 (о высоте табличных ячеек):

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

Из W3 (О высоте столбцов таблицы):

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

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

Проблема с переходом 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/ и более полная (и общая) таблица: a href= "http://jsfiddle.net/1rnc9bbm/4/" rel= "nofollow noreferrer" > http://jsfiddle.net/1rnc9bbm/4/

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

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


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

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

Тот же ответ относится к вашему вопросу:
fooobar.com/questions/142782/...


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

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

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

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

Но я не мог быть удовлетворен задержкой анимации "slide up", как и вы. Это, когда я нашел комментарий о кривой перехода здесь: http://css3.bradshawenterprises.com/animating_height/.

Идея этого парня блестящая, но только это решение само по себе "отключает" эффект "сползания" анимации. Поэтому, немного подумав, я просто прихожу к окончательному решению.

Итак, вот мое решение, используя Rhys Idea (ссылка выше):

Слайд-анимация (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>

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


Надеюсь, я помог!

Ответ 2

Вы не можете применять переходы высоты к элементам <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;
}

Ответ 3

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>

Ответ 4

Я только что наткнулся на то же, что и моим решением было использовать 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.

Ответ 5

Что-то вроде этого - это минимум, который вам нужен. Рабочая версия: http://jsfiddle.net/GCJrd/

голова

<style>
.togglebox {
background-color:#CCC;
height: 100px;
max-height: 100px;
-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;
}
</style>

<script src="js/jquery-1.7.1.min.js"></script>
<script>
  $(document).ready(function(){
    //Hide the toggle-area when page load
    $(".togglebox").hide();
    //slide up and down when click over id #one
    $("#one").click(function(){
    // slide toggle effect set to 600 you can set it faster too.
    $(".togglebox").slideToggle(600);
    return true;
  });
});
</script>

Тело

<button id="one">showLine1</button>
<table id="my_table">
<tbody>
  <tr>
  <td>1</td>
  <td>2</td>
 </tr>
 <tr class="togglebox">
  <td>hidden 1</td>
  <td>hidden 2</td>
  </tr>
</tbody>
</table>