CSS переход не работает для процентной высоты?

Question

У меня есть следующие определения CSS:

.detailsCollapsed
{
   display:none;
   height:0%;
   width:100%;
   -webkit-transition:height 40s ease-in-out;
}

.detailsExpanded
{
    display:block;
    visibility:visible;
    height:100%;
    width:100%;
    -webkit-transition:height 40s ease-in-out;
}

Они применяются к div с некоторым содержимым внутри него.

У меня также есть некоторый javascript, который при нажатии на него divизменяет имя класса на элементе.Это прекрасно работает для расширения и свертывания, но на iphone нет анимации?(Все остальные переходы, которые я пробовал, отлично работают с плавной анимацией) Есть идеи?

Answer 1

Решение (чистый CSS) до сих пор

Если вы оставите height:auto; и используете фиксированные значения max-height, вы можете смоделировать переход:

.details-expanded {
    max-height: 300px; /* try to guess a max-height for your content */
}

.details-collapsed {
    height: auto;
    max-height: 0;
    transition: max-height 500ms linear; /* pick a proportional duration */
}

Обратите внимание надлительность перехода и max-height при расширении элемента.Поиграйте со значениями, пока не получите желаемое поведение.

Таким образом, вы можете получить переход между двумя определенными значениями (в приведенном выше примере, от 0 до 300), в то время как свойство height будет просто «следовать»max-height переход и растут, пока не получит размер контента.

---

Демонстрации

DEMO 1 - рабочий пример этогорешение

DEMO 2 - просто демонстрация того, что происходит в DEMO 1

---

Наблюдения

Покапереходы осуществляются только между предопределенными значениями, и я предположил, что это потому, что механизм не может угадать начальное или конечное значение в некоторых случаях.Что если у вас есть переход по высоте, конечное значение которого составляет 50%, но сам переход как-то влияет на рост родителя ?!Вероятно, потребуется несколько вычислений reflow для каждого кадра, что приведет к проблемам с производительностью.

Как сказал fabb , спецификация для переходов CSS определяет, что процентные значения должны поддерживаться, так что это может быть лишь вопросом времени, пока движки не решат, в каких случаяхони будут поддерживать переходы, используя динамически оцениваемые точки.Тем не менее, я не уверен в том, что можно считать правильным поведением для auto значений.

Answer 2

Согласно спецификации W3C для переходов CSS3 , для перехода к свойству height должны быть разрешены как длина , так и процент ,Так что, думаю, это просто вопрос времени, пока процентная доля не будет поддерживаться в браузерах.

Answer 3

У меня была такая же проблема.Переход работал нормально при «свертывании», но появлялся без перехода (например, при «включении») при «расширении», когда ранее было установлено «display: none».

Я случайно пришел к рабочему решению, покаотладка: простое обращение к «offsetHeight», кажется, вызывает внутреннюю повторную визуализацию элемента.

что-то вроде этого:

    showElement = function(){
       ...
       oEl.style.display = "block";
       var xDump = oEl.offsetHeight;
       oEl.className = "show";
    }

xDump никогда не используется, но его наличие создает разницу.

Answer 4

Я использовал следующее решение для элементов, где мне нужно переключаться между отображением none и block и сохранять эффект перехода:

function slidedown(element) {
    ...
    element.style.display = "block";
    var timerId = setTimeout(function(){
        element.style.webkitTransitionProperty = "height";
        element.style.webkitTransitionTiming = "linear";
        element.style.webkitTransitionDuration = "3.5s";
        element.style.height = "500px";
    }, 0);
    ...
}

функция setTimeout вызовет небольшую задержку, позволяющую осуществить переход после переключения свойства отображения. Надеюсь, это поможет.

Answer 5

Это изменение от отображения: нет отображения: блок, который останавливает переход. Попробуйте установить свернутый стиль для отображения: блок; высота: 0; переполнение: скрытый;

Примечание: расширенная высота авто также остановит переход. Если для содержащего блока не задана высота, то высота 100% равна высоте auto.

Answer 6

CSS решение без необходимости расчета max-height

Вот мое решение, если общая высота неизвестна

.container{
  
  overflow:hidden;
  max-height:20px;
  transition-property: max-height;
  -webkit-transition-property: max-height;
  transition-delay: 1s; /*Set a delay for this css-propery so content also slides up*/
  -webkit-transition-delay: 1s;
}
.container .content{
  z-index:5;
  background-color:LightGray;
  
  margin-top:20px;
  transform:translateY(-100%);
  -webkit-transform:translateY(-100%);
  transition:transform 1s;
  -webkit-transition:transform 1s;
}
.container:hover{
  max-height:9999px; /*apparently "none" doesnt work*/
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}
.container:hover .content{
  
  transform:translateY(0);
  -webkit-transform:translateY(0);
}

/*Less interesting stuff below*/
body{
  background-color:navy;
}
div,label{
  margin:0;
  padding:0;
}
.container label{ /*Just a label to describe what you can do here*/
  height:20px;
  line-height:20px;
  display:block;
  z-index:10;
  position:absolute;
  background-color:maroon;
  width:100%;  
}

<body>
<div class="container">
<label>
Hover container
</label>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis congue lectus pharetra interdum. Cras sit amet interdum ipsum, vel commodo ante. Maecenas quis libero eu tortor suscipit rutrum. Cras quam eros, malesuada ac semper sed, viverra condimentum nisl. Quisque lobortis porta purus non fringilla. Fusce erat eros, aliquam a diam quis, ullamcorper laoreet odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pharetra scelerisque felis, vitae finibus dui lobortis non. Mauris iaculis rutrum vehicula. Nullam porta arcu et diam porta, in tristique nisl ornare. Mauris id ex maximus, lobortis erat a, laoreet justo.

Nullam tempus neque enim, nec consectetur enim fringilla ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin non rutrum nisl, sed vestibulum augue. Sed ac magna et metus tempus bibendum elementum id libero. Sed semper imperdiet risus et pellentesque. Aliquam commodo magna at rhoncus pellentesque. Vivamus tempus tellus lorem, a volutpat est pharetra nec. Vestibulum velit ligula, aliquet sit amet bibendum eget, viverra scelerisque tellus. Cras aliquam hendrerit bibendum. Etiam non faucibus nisi, sit amet cursus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Maecenas in eros ac elit pretium molestie. Mauris quis dolor erat. Suspendisse scelerisque gravida libero, rutrum consectetur metus ultrices in. Fusce eleifend, orci vitae sodales dictum, lectus nunc volutpat nulla, in efficitur dolor augue sed lorem. Nam ac lectus ultrices, ornare magna non, auctor neque. Mauris eros eros, bibendum commodo dolor non, posuere ultrices leo. Nullam ut laoreet ligula. Nulla posuere risus nec nibh fermentum, pretium consequat tellus eleifend. Vestibulum volutpat nisl quis euismod pulvinar. Donec hendrerit augue sed dui volutpat ultrices. Pellentesque mollis scelerisque metus, vulputate viverra risus pellentesque et. Duis nisi ante, faucibus in nunc et, semper varius turpis. Vivamus pharetra volutpat convallis.

Curabitur quis urna in orci tincidunt cursus vel ac dolor. Integer turpis augue, maximus eu lectus a, euismod consequat risus. Fusce leo lacus, dignissim vel sapien at, venenatis porttitor dui. Donec in metus non ex facilisis venenatis. In ac urna non tellus lobortis fringilla. Maecenas ornare dui nisl, gravida ornare purus aliquam in. Cras nec tortor eget neque volutpat pulvinar. In vestibulum, ante ut pharetra semper, nulla libero tincidunt nunc, a convallis orci dolor vel metus. Vivamus enim est, volutpat sit amet sagittis ut, efficitur at lacus. Morbi laoreet erat sit amet finibus finibus. Nulla sodales ut est non commodo. Aliquam sed purus a magna vehicula ullamcorper et id nunc. Curabitur aliquet tempor odio, euismod tempor ante consectetur ut. Proin neque sem, imperdiet sed est quis, ultricies tincidunt sem.

Donec nec sem id eros congue convallis eu in nibh. Etiam viverra sollicitudin maximus. In hac habitasse platea dictumst. Ut quis porta turpis. Duis egestas quam diam, id bibendum dolor imperdiet quis. Praesent ac odio in neque ultrices commodo. Nullam ac lacus sit amet dolor rhoncus tincidunt.
</div>
</div>
</body>

Рабочий пример

Answer 7

Вот решение для тех, кто хочет использовать проценты.

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

вот код

.container {
    width: 500px; 
    height: 500px; 
    background: transparent;
}
.expand-content{
    height: 0%; 
    color: #fff;
    background: green;
}
.expand-content:hover {
    height: 100%; 
    background: orange;
    transition: all 2s ease;
}
.expand-content p  {
    font-size: 35px; 
    text-align: center;     
}

<div class="container">
    <div class="expand-content">
        <p>Expanded Content</p>
    </div>
</div>

на JSFiddle: http://jsfiddle.net/jtZ8j/7/

Answer 8

Надеюсь, вы уже обошли это, но я просто пишу, чтобы сказать, что столкнулся с той же проблемой: WebKit, по крайней мере, на iOS 4.1, не будет анимировать переход, если он был определен для элемента, стилизованного с помощью " display: none; ", как упоминал выше Николас.

Если ваша задача не отображать этот элемент - это производительность, как в моем случае, тогда я предлагаю другое решение, чем установка высоты 0. В обратном вызове события вашего тела onLoad сохраните элемент в переменной и удалите его из DOM. , Затем вставьте его снова, когда придет время показать его.