CSS transition fade in

Question

그래서 전 CSS 전환을 사용했지만이 경우에는 특별한 경우가 있습니다. 나는 모달을 만들기위한 커스텀 플러그인을 작성 중이다. 기본적으로 나는 div을 작성하고 몇 개의 클래스로 본문에 추가합니다. 이 클래스는 색상 및 불투명도를 정의합니다. 이 div에서 페이드 할 수 있으려면 엄격하게 CSS를 사용하고 싶지만 상태 변경을 수행하는 것이 어려워 보이지만 일부 사용자 상호 작용이 필요합니다.

는 아이디어와 제안을 찾고, 내가 정말 당신을 믿을 수

Answer 1

경우 CSS에서 이것을 유지하려는 상태를 변경 ... 기대 미디어 쿼리를 시도, 그것은 상태 변경을 구분 바라고 일부 고급 선택기를 시도 요소에 클래스를 추가 할 수 있습니다. 그러나 어느 쪽이든 당신은 우선 당신이 (document.createElement('div'))를 사용하여 사업부를 만들 때 어떻게 작동하는지 모르겠어요,

div { 
    opacity:0; 
    transition:opacity 1s linear;* 
} 
div.SomeClass { 
    opacity:1; 
} 

Answer 2

OK JQuery와 또는 등록 JS를 사용해야 할 것입니다, 그래서 지금은 틀릴 수도 있지만 같으면 이것에 대해 : target 의사 클래스 선택자를 사용할 수 있습니까?

아래 코드를 보면 div를 타겟팅 할 수있는 링크를 사용할 수 있지만 그 경우 스크립트에서 #new을 대상으로 타겟팅 할 수 있습니다. 그런 식으로 div를 만듭니다. 사용자 상호 작용없이 페이드 인하거나 잘못 생각하고 있습니까? 여기

내 예를 들어 코드입니다 :

HTML

<a href="#new">Click</a> 
<div id="new"> 
    Fade in ... 
</div> 

CSS

#new { 
    width: 100px; 
    height: 100px; 
    border: 1px solid #000000; 
    opacity: 0;  
} 


#new:target { 
    -webkit-transition: opacity 2.0s ease-in; 
     -moz-transition: opacity 2.0s ease-in; 
     -o-transition: opacity 2.0s ease-in; 
            opacity: 1; 
} 

... 그리고 여기에 jsFiddle

Answer 3

CSS 키 프레임 지원이 꽤 좋은 요즘입니다 :

내가 질문 올바른 이해한다면 확실하지

.fade-in { 
 
\t opacity: 1; 
 
\t animation-name: fadeInOpacity; 
 
\t animation-iteration-count: 1; 
 
\t animation-timing-function: ease-in; 
 
\t animation-duration: 2s; 
 
} 
 

 
@keyframes fadeInOpacity { 
 
\t 0% { 
 
\t \t opacity: 0; 
 
\t } 
 
\t 100% { 
 
\t \t opacity: 1; 
 
\t } 
 
}

<h1 class="fade-in">Fade Me Down Scotty</h1>