CSS 애니메이션 및 디스플레이 없음

일정 시간 후에 슬라이드되는 div에 대한 CSS 애니메이션이 있습니다. 내가 원하는 것은 몇 개의 div가 슬라이드되는 애니메이션 div의 공간을 채우는 것입니다. 그러면 해당 요소가 페이지 아래로 푸시됩니다.

내가 첫 번째 div에서 이것을 시도하면 슬라이드가 보이지 않아도 여전히 공간을 차지합니다. div를 div로 변경하면 display:none전혀 슬라이드되지 않습니다.

들어올 때까지 (타이밍을 위해 CSS를 사용하여) div가 공간을 차지하지 않게하려면 어떻게해야합니까?

애니메이션에 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가 더 부드럽고 타이밍이 조금 더 잘 제어되므로 엄격하게 CSS를 사용하는 것을 선호합니다.

편집하다

Duopixel이 제안한 것을 시도했지만 잘못 이해하고 올바르게 수행하지 않거나 작동하지 않습니다. 다음은 코드입니다.

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;
}

(그 문제에 대한 또는 jQuery를) CSS는 사이하지 애니메이션 할 수 있습니다 display: none;와 display: block;. 나쁜 아직 : 그것은 사이 애니메이션 할 수 없습니다 height: 0와 height: auto. 따라서 높이를 하드 코딩해야합니다 (값을 하드 코딩 할 수 없으면 자바 스크립트를 사용해야하지만 이것은 완전히 다른 질문입니다).

#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를 사용하고 있다고 언급 하셨기 때문에 이것은 바닐라 CSS입니다.

여기에서 데모를 볼 수 있습니다 : http://jsfiddle.net/duopixel/qD5XX/

이미 몇 가지 답변이 있지만 여기에 내 해결책이 있습니다.

나는 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요소에 클래스 를 추가하자마자 페이드 아웃됩니다.

나는 같은 문제가 있었다. 왜냐하면 display: x;애니메이션이 되 자마자 애니메이션이되지 않기 때문이다 .

결국 사용자 지정 키 프레임을 만들고 먼저 display값을 변경 한 다음 다른 값을 변경했습니다 . 더 나은 솔루션을 제공 할 수 있습니다.

또는 사용 display: none;하는 대신 position: absolute; visibility: hidden;작동합니다.

다음을 사용하여 순수한 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그리고 border0, 또는 간단하게 padding-top, padding-bottom, margin-top와 margin-bottom.

여기에서 Duopixel의 데모를 업데이트했습니다. http://jsfiddle.net/qD5XX/231/

다음은 다음과 같은 경우 요소에 애니메이션을 적용합니다.

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;
 }

자바 스크립트

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");
}

높이를 애니메이션 할 때 (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);
  }
}

들어올 때까지 (타이밍을 위해 CSS를 사용하여) div가 공간을 차지하지 않게하려면 어떻게해야합니까?

여기에 같은 문제에 대한 해결책이 있습니다.

또한 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_replacing하여 만들어집니다. 100 개 이상의 div 슬라이드 쇼에서 모든 독점 접두사에 대해 모든 것을 다시 입력하기에는 너무 게으 릅니다.