Câu hỏi Chuyển tiếp trên màn hình: thuộc tính


Tôi hiện đang thiết kế một loại trình đơn thả xuống 'mega' của CSS - về cơ bản là trình đơn thả xuống CSS thông thường, nhưng có chứa các loại nội dung khác nhau.

Tại thời điểm này, có vẻ như các chuyển tiếp CSS3 không áp dụng cho thuộc tính 'display', tức là bạn không thể thực hiện bất kỳ loại chuyển đổi nào từ display: none đến display: block (hoặc bất kỳ sự kết hợp nào).

Bất cứ ai có thể nghĩ ra một cách cho trình đơn cấp hai từ ví dụ trên để 'mờ dần' khi ai đó di chuột qua một trong các mục menu cấp cao nhất?

Tôi biết rằng bạn có thể sử dụng hiệu ứng chuyển tiếp trên visibility: tài sản, nhưng tôi không thể nghĩ ra một cách để sử dụng hiệu quả.

Tôi cũng đã cố gắng sử dụng chiều cao nhưng điều đó chỉ thất bại thảm hại.

Tôi cũng biết rằng nó không quan trọng để đạt được điều này bằng cách sử dụng JavaScript, nhưng tôi muốn thử thách bản thân mình chỉ sử dụng CSS và tôi nghĩ rằng tôi sắp tới một chút ngắn.

Tất cả và mọi đề xuất được chào đón nhiều nhất.


1074
2017-07-25 22:52


gốc


Quá trình chuyển đổi CSS có hoạt động nếu bạn áp dụng nó cho thuộc tính độ mờ thay vì hiển thị không? - Paul D. Waite
vị trí: tuyệt đối; khả năng hiển thị: ẩn; giống như hiển thị: không có gì; - Jawad
@ Jawad: Chỉ khi bạn thêm nội dung nào đó như z-index:0 cũng. - DanMan
@ Jawad: Bạn nên không bao giờ sử dụng visibility: hidden trừ khi bạn muốn screenreaders để đọc nó (trong khi các trình duyệt điển hình sẽ không). Nó chỉ xác định khả năng hiển thị của phần tử (như nói opacity: 0), và nó vẫn có thể lựa chọn, có thể nhấp và bất kỳ thứ gì mà nó từng sử dụng; nó chỉ không nhìn thấy được. - Forest Ka
không hỗ trợ cho pointer-events trong IE 8,9,10, nên không phải lúc nào cũng ổn - Steven Pribilinskiy


Các câu trả lời:


Bạn có thể nối hai quá trình chuyển đổi trở lên và visibility là những gì có ích trong lần này.

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}
<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

(Đừng quên tiền tố của nhà cung cấp transition bất động sản)

Thêm chi tiết có trong bài viết này


1026
2017-08-04 14:58



visibility đã làm việc rất tốt cho tôi - cuối cùng có sử dụng tốt cho tài sản này :) - Kobi
Vâng vấn đề với điều này là bất cứ điều gì đằng sau nó sẽ chồng chéo ngay cả khi nó không nhìn thấy được. Tôi tìm thấy bằng cách sử dụng chiều cao: 0 một giải pháp tốt hơn nhiều - Josh Bedo
Điều này là tốt đẹp nhưng vấn đề là yếu tố "khả năng hiển thị ẩn" vẫn chiếm không gian trong khi "không hiển thị" thì không. - Rui Marques
Tôi có thể thiếu một cái gì đó, nhưng tại sao bạn thay đổi cả tầm nhìn và độ mờ đục? Sẽ không đặt độ mờ thành 0 ẩn phần tử - tại sao bạn cũng cần đặt chế độ hiển thị thành ẩn? - GMA
@GeorgeMillo nếu bạn chỉ đặt độ mờ, phần tử thực sự vẫn còn trên trang kết xuất (bạn không thể nhấp vào suy nghĩ chẳng hạn). - Grsmto


Bạn cần phải ẩn phần tử bằng các cách khác để làm việc này.

Tôi đã hoàn thành hiệu ứng bằng cách định vị cả hai <div>s hoàn toàn và thiết lập một ẩn để opacity: 0.

Nếu bạn thậm chí chuyển đổi display tài sản từ none đến block, Quá trình chuyển đổi của bạn trên các yếu tố khác sẽ không xảy ra.

Để giải quyết vấn đề này, hãy luôn cho phép yếu tố display: blocknhưng ẩn phần tử bằng cách điều chỉnh bất kỳ phương tiện nào sau đây:

  1. Đặt height đến 0.
  2. Đặt opacity đến 0.
  3. Định vị phần tử bên ngoài khung của phần tử khác có overflow: hidden.

Có nhiều giải pháp hơn, nhưng bạn không thể thực hiện chuyển đổi nếu bạn chuyển đổi phần tử thành display: none. Ví dụ, bạn có thể thử một cái gì đó như thế này:

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0; 
}
div.active {
    opacity: 1;
    display: block;
}

Nhưng điều đó sẽ không phải công việc. Từ kinh nghiệm của tôi, tôi đã tìm thấy điều này để không làm gì cả.

Bởi vì điều này, bạn sẽ luôn luôn cần phải giữ nguyên tố display: block - nhưng bạn có thể giải quyết nó bằng cách làm như thế này:

div {
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}

660
2017-07-26 04:20



Cảm ơn Jim cho một câu trả lời kỹ lưỡng. Bạn hoàn toàn đúng về thực tế là nếu màn hình: tài sản thay đổi, thì TẤT CẢ các chuyển tiếp của bạn sẽ không hoạt động. Đó là một sự xấu hổ - Tôi tự hỏi lý do đằng sau đó là gì. Trên một lưu ý phụ, trên cùng một liên kết tôi đăng trong câu hỏi ban đầu, bạn có thể thấy nơi tôi đang ở với nó. Vấn đề duy nhất (nhỏ) mà tôi gặp phải là trong Chrome [5.0.375.125] khi tải trang, bạn có thể thấy menu nhanh chóng biến mất khi các phần tử được tải trên trang. Firefox 4.0b2 và Safari 5.0 là hoàn toàn tốt ... lỗi hoặc một cái gì đó tôi đã bỏ lỡ? - RichardTape
Tôi đồng ý rằng điều này là đúng và sẽ đóng góp này; một người đứng đầu cho du khách trong tương lai. Tôi đã tìm thấy một giải pháp làm việc trong Chrome, nhưng tôi thấy nó không thành công trên iPhone 4: visibility:hidden; opacity:0; -webkit-transition: all .2s ease-in-out; Điều này không chỉ chuyển đổi một cách chính xác, mà phần tử đích sẽ không bao giờ xuất hiện. QA sẽ làm bạn thất vọng, tôi và mẹ của bạn. - SimplGy
Bạn thực sự có thể chuyển đổi thuộc tính hiển thị là tốt .. chỉ cần nói - Cu7l4ss
Nếu bạn đặt trạng thái ẩn thành height: 0; và không chuyển đổi nó, quá trình chuyển đổi sẽ không hoạt động. Tôi đã thử điều này chỉ cố gắng chuyển đổi độ mờ đục. Tôi phải loại bỏ height: 0; - chovy
bạn vừa thắng một phiếu bầu vì overflow: hidden cảm ơn bạn rất nhiều! - thiagoh


Tại thời điểm bài đăng này, tất cả các trình duyệt chính đều vô hiệu hóa quá trình chuyển đổi CSS nếu bạn cố gắng thay đổi display tài sản, nhưng hoạt ảnh CSS vẫn hoạt động tốt để chúng tôi có thể sử dụng chúng như một công việc xung quanh.

Mã ví dụ: -   (Bạn có thể áp dụng nó cho trình đơn của bạn cho phù hợp) Bản giới thiệu

Thêm CSS sau vào biểu định kiểu của bạn: -

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

Sau đó, áp dụng fadeIn hoạt ảnh cho trẻ trên di chuột gốc: - (và tất nhiên là được đặt display: block)

.parent:hover .child {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

203
2018-02-17 19:25



Cám ơn vì cái này. Các height: 0 trick (cho quá trình chuyển đổi) được đề cập ở trên dường như không hoạt động vì chiều cao được đặt thành 0 khi chuyển đổi mờ dần, nhưng mẹo này dường như chỉ hoạt động tốt. - Elliot Winkler
Cảm ơn, rất hữu ích. Nhưng làm thế nào để làm mờ nó ra? - Illiou
Đoạn đầu tiên của câu trả lời này không hoàn toàn hợp lý. Trình duyệt không chỉ tắt tất cả các chuyển tiếp ngay khi bạn sử dụng display tài sản - thực sự không có lý do gì. Và ngay cả khi họ đã làmthì tại sao hoạt ảnh lại hoạt động? Bạn không thể sử dụng display thuộc tính trong hoạt ảnh CSS. - BoltClock♦
Câu trả lời hay nhất, không thể với chuyển tiếp nhưng có với hoạt ảnh. - Mikel
Làm thế nào về hoạt hình ngược lại, đó là khi yếu tố nên từ từ biến mất? - Green


Tôi nghi ngờ rằng lý do chuyển đổi bị vô hiệu hóa nếu "hiển thị" được thay đổi là vì những gì hiển thị thực sự. Nó không không phải thay đổi bất cứ thứ gì có thể hình dung được một cách mượt mà.

“Display: none;” và “visibility: hidden;” là hai hoàn toàn những thứ khác. Cả hai đều có tác dụng làm cho phần tử ẩn đi, nhưng với "khả năng hiển thị: bị ẩn", nó vẫn được hiển thị trong bố cục, nhưng không phải hiển nhiên vì thế. Phần tử ẩn vẫn chiếm không gian và vẫn được hiển thị nội tuyến hoặc dưới dạng khối hoặc khối nội tuyến hoặc bảng hoặc bất kỳ phần tử "hiển thị" nào yêu cầu nó hiển thị dưới dạng và chiếm dung lượng phù hợp. Các yếu tố khác làm không phải tự động di chuyển để chiếm không gian đó. Phần tử ẩn chỉ không hiển thị các pixel thực tế của nó đến đầu ra.

"Hiển thị: không" trên thực tế mặt khác ngăn cản yếu tố từ hiển thị hoàn toàn. Nó không mất bất kì không gian bố cục. Các yếu tố khác đã chiếm giữ một phần hoặc toàn bộ không gian do yếu tố này đưa ra hiện nay điều chỉnh để chiếm không gian đó, như thể yếu tố đơn giản không tồn tại chút nào.

"Hiển thị" không chỉ là một thuộc tính trực quan khác. Nó thiết lập toàn bộ chế độ hiển thị của phần tử, chẳng hạn như đó là một khối, nội tuyến, khối nội tuyến, bảng, hàng trong bảng, ô bảng, danh sách mục hay bất kỳ thứ gì! Mỗi người có phân nhánh bố cục rất khác nhau, và sẽ không có cách nào hợp lý để chuyển động hay chuyển đổi chúng một cách trơn tru (hãy thử tưởng tượng một sự chuyển đổi suôn sẻ từ "khối" sang "nội tuyến" hoặc ngược lại, chẳng hạn!).

Đây là lý do tại sao quá trình chuyển đổi bị vô hiệu hóa nếu hiển thị thay đổi (ngay cả khi thay đổi đến hoặc từ "không" - "không" không chỉ là tính không xác định, đó là chế độ hiển thị phần tử riêng của nó có nghĩa là không hiển thị!),


54
2018-06-15 18:55



Chính xác. Nó không rõ ràng ngay lập tức, nhưng một khi bạn nghĩ về nó, nó không mất nhiều thời gian để bạn nhận ra rằng việc chuyển đổi display tài sản không thể công việc. - BoltClock♦
Tốt như các giải pháp trên có thể được, nó đã rất hài lòng để có được một lời giải thích hợp lý như cho lý do tại sao quá trình chuyển đổi không áp dụng cho các thuộc tính hiển thị. - kqr
Tôi không đồng ý. Nó có thể hoàn toàn có ý nghĩa. Nếu hiển thị: không hiển thị: khối xuất hiện ngay lập tức khi bắt đầu quá trình chuyển đổi, điều đó sẽ tuyệt vời. Và để chuyển trở lại, nếu nó đi từ màn hình hiển thị: khối để hiển thị: không có quyền ở cuối quá trình chuyển đổi, điều đó sẽ hoàn hảo. - Curtis Yallop
Nếu bạn không thể tưởng tượng hình động từ một điểm đến hình chữ nhật trông như thế nào, bạn đã gặp vấn đề. Một quá trình chuyển đổi từ chiếm không gian để chiếm một không gian hình chữ nhật là rất rõ ràng, giống như, bạn làm điều đó mỗi khi bạn kéo một hình chữ nhật ra bằng chuột giống như mọi ứng dụng bao giờ hết. Là kết quả của sự thất bại này, có rất nhiều hacks liên quan đến chiều cao tối đa và lợi nhuận tiêu cực nó là vô lý. Điều duy nhất hoạt động là lưu vào bộ nhớ đệm chiều cao 'thực' và sau đó làm động từ số không đến giá trị được lưu trong bộ nhớ cache bằng JavaScript. Buồn. - Triynko
Tryniko: display: none không thay đổi kích thước của phần tử thành một hình chữ nhật 0 x 0 - nó loại bỏ nó khỏi DOM. Bạn có thể tạo hiệu ứng động từ một hình chữ nhật sang một điểm bằng cách làm động các thuộc tính chiều rộng và chiều cao bằng không và sau đó các phần tử khác sẽ chạy xung quanh nó như thể nó có 'display: none' nhưng thuộc tính 'display' của nó sẽ vẫn là 'block'; phần tử vẫn còn trong DOM. Khái niệm hoạt hình giữa hiển thị: khối và hiển thị: không có gì là vô lý: Không có trạng thái trung gian. Một phần tử tồn tại trong DOM hoặc không, dù nhỏ hay vô hình. - Steve Thorpe


display không phải là một trong những thuộc tính mà quá trình chuyển đổi hoạt động.

Xem http://www.w3.org/TR/css3-transitions/#animatable-properties- cho danh sách các thuộc tính có thể có hiệu ứng chuyển tiếp được áp dụng cho chúng.


41
2017-09-22 23:24





Tôi biết đây là một câu hỏi rất cũ nhưng đối với những người đang xem chuỗi này, bạn có thể thêm hoạt ảnh tùy chỉnh vào thuộc tính khối ngay bây giờ.

@keyframes showNav {
  from {opacity: 0;}
  to {opacity: 1;}
}
.subnav-is-opened .main-nav__secondary-nav {
  display: block;
  animation: showNav 250ms ease-in-out both;
}

Bản giới thiệu

Trong bản demo này, các thay đổi menu phụ từ display:none đến display:block và vẫn còn mờ dần.


28
2017-07-29 20:51



Nên myfirst được showNav đây? Còn Firefox thì sao? Thật không may tôi không thể tìm thấy một cái gì đó liên quan trên trang demo bạn đang đề cập đến. - Sebastian vom Meer
Cảm ơn @SebastianG. Tôi đã thực hiện chỉnh sửa và thêm một số thông tin khác ở trên. - Manish Pradhan
@Sebastian vom Meer: các phiên bản Firefox cũ hơn cần tiền tố nhà cung cấp "-moz-", xem mã đã chỉnh sửa - Herr_Schwabullek
Trừ khi tôi đang thiếu một cái gì đó liên kết "demo" không còn hiển thị một chuyển tiếp menu phụ. - Realistic
Hey, liên kết demo của bạn theo sau developers.google.com - Green


Theo Bản thảo làm việc của W3C ngày 19 tháng 11 năm 2013  display không phải là thuộc tính có thể hoạt hình. May mắn thay, visibility có thể hoạt hình. Bạn có thể chuỗi chuyển đổi của nó với một sự chuyển đổi của độ mờ đục (JSFiddle):

  • HTML:

    <a href="http://example.com" id="foo">Foo</a>
    <button id="hide-button">Hide</button>
    <button id="show-button">Show</button>
    
  • CSS:

    #foo {
        transition-property: visibility, opacity;
        transition-duration: 0s, 1s;
    }
    
    #foo.hidden {
        opacity: 0;
        visibility: hidden;
        transition-property: opacity, visibility;
        transition-duration: 1s, 0s;
        transition-delay: 0s, 1s;
    }
    
  • JavaScript để thử nghiệm:

    var foo = document.getElementById('foo');
    
    document.getElementById('hide-button').onclick = function () {
        foo.className = 'hidden';
    };
    
    document.getElementById('show-button').onclick = function () {
        foo.className = '';
    };
    

Lưu ý rằng nếu bạn chỉ cần tạo liên kết trong suốt, không cần thiết lập visibility: hidden, sau đó nó sẽ ở lại có thể nhấp.


17
2018-02-02 14:59



tôi không thấy bất kỳ sự chuyển tiếp nào trong ví dụ jsfiddle - Gino
@ Gino Tôi đã sửa nó bằng cách thay đổi 0 đến 0s. Rõ ràng, trong quá khứ trình duyệt mà tôi đã sử dụng để thử nghiệm được hỗ trợ vô số lần không. Tuy nhiên, vô số lần không phải một phần của Khuyến nghị ứng viên của W3C, ngày 29 tháng 9 năm 2016. - feklee
Điều này nên được upvoted hơn. Tôi thấy nó là một trong những giải pháp tốt nhất. - Arthur Tarasov
STOP trả lời rằng màn hình không phải là một thuộc tính có khả năng hoạt hình. Chỉ cần vui lòng DỪNG. Nó hoàn toàn không liên quan. Tiêu chuẩn nói rằng màn hình không thể tự động hoạt ảnh. Nó không nói rằng thay đổi nó sẽ ngăn chặn các hình ảnh động của tất cả các tài sản khác từ làm việc. Đây là một triệu chứng hoàn toàn khác. - Szczepan Hołyszewski