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

Question

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

У меня есть следующие определения 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 нет анимации? (Все остальные переходы, которые я пробовал, отлично работают с плавной анимацией) Есть идеи?

52

css webkit

Источник

user399363 22 июл '10 в 16:53

8 ответов

Другие вопросы по тегам css webkit

user741981 01 окт '10 в 11:40 2010-10-01 11:40 · Answer 1 · 2010-10-01 11:40

(Чистое 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 переходить и расти, пока не получит размер контента.

демос

ДЕМО 1 - рабочий пример этого решения

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

наблюдения

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

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

user354018 20 мар '11 в 13:06 2011-03-20 13:06 · Answer 2 · 2011-03-20 13:06

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

19

Источник

user354018 20 мар '11 в 13:06

user559976 01 янв '11 в 21:02 2011-01-01 21:02 · Answer 3 · 2011-01-01 21:02

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

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

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

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

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

user562077 04 янв '11 в 04:22 2011-01-04 04:22 · Answer 4 · 2011-01-04 04:22

Я использовал следующее решение для элементов, где мне нужно переключаться между отображением 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 заставит небольшую задержку, позволяющую осуществить переход после переключения свойства display. Надеюсь, поможет.

user195050 16 сен '10 в 13:27 2010-09-16 13:27 · Answer 5 · 2010-09-16 13:27

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

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

user1463854 22 авг '18 в 07:59 2018-08-22 07:59 · Answer 6 · 2018-08-22 07:59

CSS решение без необходимости рассчитывать максимальную высоту

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

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

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

user126474 10 ноя '10 в 20:08 2010-11-10 20:08 · Answer 7 · 2010-11-10 20:08

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

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

user3167842 05 дек '14 в 00:40 2014-12-05 00:40 · Answer 8 · 2014-12-05 00:40

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

Хитрость заключается в том, чтобы содержать его внутри 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/

user11747569 12 сен '20 в 23:59 2020-09-12 23:59 · Answer 9 · 2020-09-12 23:59

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

решение 1: максимальная высота (идеальное решение)

.slideup, .slidedown {
  height: auto;
  max-height: 0px;            
  overflow-y: hidden;
  transition: max-height 300ms ease-in-out;
}

.slidedown {            
  max-height: 500px;                    
}

решение 2: преобразование: scaleY()

.slideup .slidedown {
  overflow:hidden;
  transition:transform 0.3s ease-out; 
  transform, not height!
  height:auto;
  transform:scaleY(1);
}

.slideup  {
  transform:scaleY(0); //collapse the view
}