it-swarm.com.ru

CSS3 анимация и отображение нет

У меня есть CSS 3 анимация для div, который скользит через определенное количество времени. Я хотел бы, чтобы несколько div-ов заполняли пространство анимированного div-компонента, который вставляется, и затем он выталкивает эти элементы вниз по странице.

Когда я пытаюсь это сделать сначала, div, который вставляется, по-прежнему занимает место, даже когда его не видно. Если я изменю div на display:none, div вообще не будет вставлен.

Как сделать так, чтобы div не занимал место, пока не пришло время войти (используя CSS для определения времени).

Я использую Animate.css для анимации.

Вот как выглядит код:

<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>

<div id="div1"><!-- Content --></div>
<div id="div2"><!-- Content --></div>
<div id="div3"><!-- Content --></div>

Как показывает код, я бы хотел, чтобы основной div был скрыт, а остальные div показывались сначала. Тогда я установил следующую задержку:

#main-div{
   -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

Именно в этот момент я бы хотел, чтобы основной div выдвигал остальные div по мере их поступления.

Как мне это сделать?

Примечание: я рассмотрел использование jQuery для этого, однако я предпочитаю использовать строго CSS, так как он более плавный, а время немного лучше контролируется.

РЕДАКТИРОВАТЬ

Я попытался сделать то, что предложил Дуопиксель, но либо неправильно понял, либо делаю это неправильно, либо это не работает. Вот код:

HTML

<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>

CSS

#main-image{
    height: 0;
    overflow: hidden;
   -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}
#main-image.fadeInDownBig{
    height: 375px;
}
56
L84

CSS (или jQuery, в этом отношении) не может анимировать между display: none; и display: block;. Хуже того: он не может анимироваться между height: 0 и height: auto. Поэтому вам нужно жестко кодировать высоту (если вы не можете жестко кодировать значения, тогда вам нужно использовать javascript, но это совершенно другой вопрос);

#main-image{
    height: 0;
    overflow: hidden;
    background: red;
   -prefix-animation: slide 1s ease 3.5s forwards;
}

@-prefix-keyframes slide {
  from {height: 0;}
  to {height: 300px;}
}

Вы упоминаете, что используете Animate.css, с которым я не знаком, так что это Vanilla CSS.

Вы можете увидеть демо здесь: http://jsfiddle.net/duopixel/qD5XX/

57
methodofaction

Уже есть несколько ответов, но вот мое решение:

Я использую opacity: 0 и visibility: hidden. Чтобы убедиться, что visibility установлен перед анимацией, мы должны установить правильные задержки.

Я использую http://lesshat.com , чтобы упростить демонстрацию, для использования без этого просто добавьте префиксы браузера.

(например, -webkit-transition-duration: 0, 200ms;)

.fadeInOut {
    .transition-duration(0, 200ms);
    .transition-property(visibility, opacity);
    .transition-delay(0);

    &.hidden {
        visibility: hidden;
        .opacity(0);
        .transition-duration(200ms, 0);
        .transition-property(opacity, visibility);
        .transition-delay(0, 200ms);
    }
}

Поэтому, как только вы добавите класс hidden к вашему элементу, он исчезнет.

23
Fabian Vogelsteller

У меня была такая же проблема, потому что, как только display: x; находится в анимации, он не будет оживлять.

В итоге я создал пользовательские ключевые кадры, сначала изменив значение display, а затем другие значения. Может дать лучшее решение.

Или вместо использования display: none; используйте position: absolute; visibility: hidden; Это должно работать.

11
tobspr

Вы можете создать чистую реализацию CSS с помощью max-height

#main-image{
    max-height: 0;
    overflow: hidden;
    background: red;
   -prefix-animation: slide 1s ease 3.5s forwards;
}

@keyframes slide {
  from {max-height: 0;}
  to {max-height: 500px;}
}

Возможно, вам также придется установить padding, margin и border в 0 или просто padding-top, padding-bottom, margin-top и margin-bottom.

Я обновил демо Duopixel здесь: http://jsfiddle.net/qD5XX/231/

8
oliverpool

Следующее заставит вас анимировать элемент, когда

  1. Предоставление этого Показа - Ни один
  2. Предоставление этого Показа - Блок

CSS

.MyClass {
       opacity: 0;
       display:none;
       transition: opacity 0.5s linear;
       -webkit-transition: opacity 0.5s linear;
       -moz-transition: opacity 0.5s linear;
       -o-transition: opacity 0.5s linear;
       -ms-transition: opacity 0.5s linear;
 }

JavaScript

function GetThisHidden(){
    $(".MyClass").css("opacity", "0").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend', HideTheElementAfterAnimation);
}

function GetThisDisplayed(){
    $(".MyClass").css("display", "block").css("opacity", "1").unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend");
}

function HideTheElementAfterAnimation(){
    $(".MyClass").css("display", "none");
}
5
Mahesh

При анимации высоты (от 0 до авто) использование transform: scaleY(0); является еще одним полезным способом скрытия элемента вместо display: none;:

.section {
  overflow: hidden;
  transition: transform 0.3s ease-out;
  height: auto;
  transform: scaleY(1);
  transform-Origin: top;

  &.hidden {
    transform: scaleY(0);
  }
}
1
Jesper Lehtinen

Как сделать так, чтобы div не занимал место, пока не пришло время войти (используя CSS для определения времени).

Вот мое решение той же проблемы.

Более того, у меня есть onclick в последнем кадре, загружающем другое слайд-шоу, и на нем нельзя нажимать, пока не будет виден последний кадр.

По сути, мое решение состоит в том, чтобы поддерживать высоту div 1 пикселя с помощью scale(0.001), увеличивая его, когда мне это нужно. Если вам не нравится эффект масштабирования, вы можете восстановить opacity в 1 после увеличения слайда.

#Slide_TheEnd {

    -webkit-animation-delay: 240s;
    animation-delay: 240s;

    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;

    -moz-animation-duration: 20s;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;

    -moz-animation-name: Slide_TheEnd;
    -webkit-animation-name: Slide_TheEnd;
    animation-name: Slide_TheEnd;

    -moz-animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;

    -moz-animation-direction: normal;
    -webkit-animation-direction: normal;
    animation-direction: normal;

    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    transform: scale(0.001);
    background: #cf0;
    text-align: center;
    font-size: 10vh;
    opacity: 0;
}

@-moz-keyframes Slide_TheEnd {
    0% { opacity: 0;  transform: scale(0.001); }
    10% { opacity: 1; transform: scale(1); }
    95% { opacity: 1; transform: scale(1); }
    100% { opacity: 0;  transform: scale(0.001); }
}

Другие ключевые кадры удаляются ради байтов. Пожалуйста, не обращайте внимания на странную кодировку, она создается сценарием php, который выбирает значения из массива и заменяет шаблон str_: я слишком ленив, чтобы перепечатывать все для каждого проприетарного префикса в слайд-шоу с числом элементов 100+.

0
Marco Bernardini