Không hiển thị JavaScript sau khi hoạt ảnh CSS3

Question

Tôi có div có id = 'mainmenu'. Tôi đang thêm chuyển tiếp CSS3 vào nó bằng JavaScript sau khi nhấn nút (bằng cách thêm 'chuyển tiếp' vào #mainmenu và bằng cách tạo lớp .fadein và .fadeout sẽ được thêm vào phần tử div). Mã số:

<div id='mainmenu'></div> 
<button id="btn1">Click me1</button> 
<button id="btn2">Click me2</button> 

#mainmenu { 
    width:100px; 
    height:100px; 
    background:#eee; 
    -webkit-transition: opacity 1s; 
    -moz-transition: opacity 1s; 
    transition: opacity 1s; 
} 

.fadeout { 
    opacity:0; 
} 
.fadein { 
    opacity:1; 
} 


var menu = document.getElementById('mainmenu'), 
    btn1 = document.getElementById('btn1'), 
    btn2 = document.getElementById('btn2'); 

btn1.addEventListener('click', function() { 
    menu.className = 'fadeout'; 
} 
btn2.addEventListener('click', function() { 
    menu.className = 'fadein'; 
} 

Vấn đề là bây giờ tôi muốn thêm hiển thị không có và chặn để fadeout và fadein tùy chọn. Vì vậy, sau khi div fadeout hình ảnh động sẽ nhận được màn hình không có, và sau fadeIn khối hiển thị:

btn1.addEventListener('click', function() { 
    menu.className = 'fadeout'; 
    menu.style.display = 'none'; 
} 
btn2.addEventListener('click', function() { 
    menu.className = 'fadein'; 
    menu.style.display = 'block'; 
} 

Thật không may, không hiển thị và khối thực hiện với các hình ảnh động, vì vậy các hình ảnh động không hoạt động (yếu tố được hiển thị không có, mà không hoạt ảnh opacity). Tôi muốn đầu tiên các hình ảnh động với độ mờ đục, và sau đó hiển thị không có/khối cho các yếu tố. Có cách nào để làm điều đó? Tôi chỉ có thể sử dụng JavaScript thuần túy (không có jQuery, v.v.).

Answer 1

Bạn cần phải sử dụng setTimeout() với menu.style.display = "none"; để cho phai làm điều đó là công việc trước khi bạn kích hoạt style.display.

btn1.addEventListener('click', function() { 
    menu.className = 'fadeout'; 
    setTimeout(function() { 
     $(menu).css('display', 'none'); 
    }, 1000); 
} 
btn2.addEventListener('click', function() { 
    menu.className = 'fadein'; 
    setTimeout(function() { 
     $(menu).css('display', 'block'); 
    }, 1000); 
} 

Answer 2

Tôi có thể sai ở đây, tuy nhiên tôi tin rằng bạn cần phải thêm trình kích hoạt chuyển tiếp có hiển thị: chặn/hiển thị: không thay đổi.

xem: CSS3 transition events

Answer 3

Một khả năng là sử dụng transition-delay. Tôi đã không thử nó, nhưng sau đây có thể đủ:

.fadeout { 
    opacity:0; 
} 
.fadein { 
    opacity:1; 
    display: block; 
} 
.afterFadeOut { 
    transition-delay: 1s; 
    display: none; 
} 

và sau đó thay đổi lớp học của bạn cho phai ra:

menu.className = 'fadeout afterFadeOut'; 

Điều đó sẽ tự động trì hoãn việc display: none trong một giây, đủ cho độ mờ đục đã giảm dần.

Answer 4

Tôi sử dụng chiều cao 0 thay vì hiển thị không cho một số trường hợp nhưng có thể hoặc không thể áp dụng cho những gì bạn cần. Dù sao đây là các mã:

1) Sử dụng hiệu ứng chuyển tiếp (trông giống như jQuerys fadeOut):

.fadeOut{ 
    opacity : 0; 
    height : 0; 
    transition : opacity 800ms, height 0 800ms; 
} 

nếu bạn muốn, bạn có thể thêm chiều rộng 0 quá.

.fadeOut{ 
    opacity : 0; 
    width : 0; 
    height : 0; 
    transition : opacity 800ms, height 0 800ms, width 0 800ms; 
} 

2) Sử dụng hình ảnh động (nó hoạt động nhưng hiệu ứng chuyển tiếp là tốt hơn):

.fadeOut{ 
    animation : fadeout 800ms linear forwards; 
} 
@keyframes fadeout{ 
    99%{ 
    opacity : 0; 
    height : initial; 
    } 
    100%{ 
    opacity : 0; 
    height : 0; 
    } 
} 

Answer 5

Mặc dù đây là một bài cũ, vì lợi ích của khách truy cập trong tương lai, bạn có thể sử dụng các sự kiện transitionend. Bạn có thể sử dụng:

/*For when object has fully faded*/ 
 
menu.addEventListener("transitionend", function() { 
 
    if (this.className == "fadeout") { 
 
    this.style.display = "none"; 
 
    } 
 
}.bind(menu)); 
 

 
/*Show before animation starts*/ 
 
menu.addEventListener("click", function() { 
 
    this.style.display = "block"; 
 
}.bind(menu));