Chuyển tiếp CSS mờ dần trong

Question

Vì vậy, tôi đã sử dụng chuyển tiếp CSS trước nhưng tôi có một trường hợp duy nhất với phiên bản này. Tôi đang viết một plugin tùy chỉnh để tạo các phương thức. Về cơ bản tôi tạo ra một div trên bay document.createElement('div') và nối nó vào cơ thể với một vài lớp. Các lớp này xác định màu và độ mờ đục. Tôi muốn sử dụng CSS nghiêm ngặt để có thể mờ dần trong div này, nhưng làm cho sự thay đổi trạng thái có vẻ khó khăn b/c họ yêu cầu một số tương tác người dùng.

thử một số selectors tiên tiến hy vọng nó sẽ là trường hợp một sự thay đổi trạng thái, cố gắng truy vấn phương tiện truyền thông với hy vọng sẽ thay đổi trạng thái ... tìm bất kỳ ý kiến ​​đóng góp, tôi thực sự muốn giữ điều này trong CSS nếu có thể

Answer 1

Tôi tin rằng bạn có thể addClass vào phần tử. Nhưng một trong hai cách bạn sẽ phải sử dụng Jquery hoặc reg JS

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

Answer 2

OK, trước hết là tôi không chắc chắn làm thế nào nó hoạt động khi bạn tạo một div sử dụng (document.createElement('div')), vì vậy tôi có thể sai, nhưng wouldn không thể sử dụng bộ chọn lớp giả mục tiêu cho điều này?

Nếu bạn nhìn vào mã bên dưới, bạn có thể sử dụng liên kết để nhắm mục tiêu div, nhưng trong trường hợp của bạn, bạn có thể nhắm mục tiêu #new từ tập lệnh thay vào đó và cách thực hiện phai mờ mà không có sự tương tác của người dùng, hay tôi đang nghĩ sai?

Dưới đây là đoạn code ví dụ của tôi:

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

... và đây là một sự hỗ trợ jsFiddle

Answer 3

CSS Khung hình là khá tốt những ngày này :

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