CSS를 사용하여 블록을 페이드 인하도록 입력 세트를 얻는 방법

Question

나는 막혔고, 이것에 대한 해결책을 찾아 다녔다. 페이지로드시에는 입력 값이 opacity: 0이고 나중에 전체 불투명도가 있지만 인라인 대신 페이지 아래로 이동하려면 블록으로 표시 할 입력이 필요합니다. 이렇게하면 .block 클래스의 페이드를 막을 수 있습니다. 어쨌든 입력이 블럭 방식으로되어 여전히 CSS로 페이드 인 할 수 있습니까?

또한 예제에서 레이블을 입력 위에 놓고 페이지 중앙에 표시되도록 레이블/입력을 표시 블록에 가져 오는 방법이 있습니까?

This fiddle demonstrates it best

$(function() { 
 
    var elems = $('.intro input').on('keypress', function() { 
 

 
    if ($(this).val().trim().length > 2) { 
 
     $(this).parent().next('label').addClass('block'); 
 
    } 
 

 

 
    $('#intro-button').toggle(
 
     elems.filter(function() { 
 
     return this.value.trim() !== ""; 
 
     }).length === elems.length 
 
    ) 
 

 
    }); 
 
});

.intro { 
 
\t opacity: 0; 
 
} 
 
.info-input { 
 
\t padding: 10px 15px; 
 
\t margin: 40px auto; 
 
} 
 
.intro:first-child { 
 
\t display: block; 
 
\t opacity: 1; 
 
} 
 
.block { 
 
\t display: block; 
 
\t visability: visible; 
 
\t opacity: 1; 
 
    -webkit-animation: fadein 1s ease-in; 
 
    -moz-animation: fadein 1s ease-in; 
 
    animation: fadein 1s ease-in; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<label class="intro">What is your name? 
 
\t \t \t \t <input id="name" type="text" class="info-input"> 
 
\t \t \t </label> 
 
\t \t \t <label class="intro">What is your email address? 
 
\t \t \t \t <input id="email" type="email" class="info-input"> 
 
\t \t \t </label> \t 
 
\t \t \t <label class="intro">What is your title? 
 
\t \t \t \t <input id="title" type="text" class="info-input"> 
 
\t \t \t </label>

Answer 1

변경 "애니메이션" ".block"

.block { 
     display: block; 
     visability: visible; 
     opacity: 1; 
     -webkit-transition: opacity 1s ease-in; 
     -moz-transition: opacity 1s ease-in; 
     transition: opacity 1s ease-in; 
    } 

fiddle

Answer 2

는 애니메이션 소품으로 할 수의 "전환"에 나는 n CSS. 이런 식으로 뭔가 :

이

@-webkit-keyframes fade-in { 
 
    0% { opacity: 0; } 
 
    100% { opacity: 1; } 
 
} 
 
@-moz-keyframes fade-in { 
 
    0% { opacity: 0; } 
 
    100% { opacity: 1; } 
 
} 
 
@keyframes fade-in { 
 
    0% { opacity: 0; } 
 
    100% { opacity: 1; } 
 
} 
 

 
.your-div { 
 
    display: none; 
 
} 
 
.your-div.show { 
 
    display: block; 
 
    -webkit-animation: fade-in 0.2s; 
 
    -moz-animation: fade-in 0.2s; 
 
    -o-animation: fade-in 0.2s; 
 
    animation: fade-in 0.2s; 
 
}

Answer 3

귀하의 animation 코드 (당신이 fadein 애니메이션을 정의하지 않은) 잘못되었습니다. 대신

사용 opacity transition :

fiddle

귀하의 CSS는 다음과 같이 지금 :

.intro { 
    opacity: 0; 
    padding: 10px 15px; 
    margin: 40px auto; 
    display: block; 
    visability: hidden; 
    -webkit-transition: opacity 1s ease-in; 
    -moz-transition: opacity 1s ease-in; 
    -ms-transition: opacity 1s ease-in; 
    -o-transition: opacity 1s ease-in; 
    transition: opacity 1s ease-in; 
} 

.intro:first-child { 
    visibility: visible; 
    opacity: 1; 
} 

.block { 
    visability: visible; 
    opacity: 1; 
} 

.next { 
    display: none; 
} 

.button-center { 
    margin: 40px auto; 
    text-align: center; 
} 

#intro-button { 
    display: none; 
    padding: 10px 15px; 
} 

updated fiddle