Chuyển đổi CSS với khả năng hiển thị không hoạt động

Trong fiddle bên dưới, tôi đã chuyển đổi riêng biệt về khả năng hiển thị và độ mờ. Cái sau hoạt động nhưng cái trước thì không. Hơn nữa, trong trường hợp hiển thị, thời gian chuyển đổi được hiểu là độ trễ khi di chuột ra ngoài. Xảy ra trên cả Chrome và Firefox. Đây có phải là một lỗi?

http://jsfiddle.net/0r218mdo/3/

Trường hợp 1:

#inner{
    visibility:hidden;
    transition:visibility 1000ms;
}
#outer:hover #inner{
    visibility:visible;
}

Trường hợp 2:

#inner1{
    opacity:0;
    transition:opacity 1000ms;
}
#outer1:hover #inner1{
    opacity:1;
}

Đây không phải là một lỗi - bạn chỉ có thể chuyển đổi trên các thuộc tính thứ tự / tính toán (một cách dễ hiểu về điều này là bất kỳ thuộc tính nào có giá trị số bắt đầu và số kết thúc bằng số.. mặc dù có một vài ngoại lệ).

Điều này là do quá trình chuyển đổi hoạt động bằng cách tính toán khung hình chính giữa hai giá trị và tạo ra hoạt ảnh bằng cách ngoại suy số lượng trung gian.

visibility trong trường hợp này là cài đặt nhị phân (hiển thị / ẩn), vì vậy khi thời lượng chuyển đổi trôi qua, thuộc tính chỉ chuyển trạng thái, bạn xem đây là độ trễ - nhưng nó thực sự có thể được coi là khung hình chính cuối cùng của hoạt ảnh chuyển tiếp, với khung chính trung gian chưa được tính toán (điều gì tạo nên các giá trị giữa ẩn / hiển thị? Độ mờ? Thứ nguyên? Vì không rõ ràng nên chúng không được tính toán).

opacity là cài đặt giá trị (0-1), do đó, khung hình chính có thể được tính toán trong khoảng thời gian được cung cấp.

Bạn có thể tìm thấy danh sách các thuộc tính có thể chuyển đổi (hoạt ảnh) tại đây

Khả năng hiển thị có thể hoạt hình. Kiểm tra bài đăng trên blog này về nó: http://www.greywyvern.com/?post=337

Bạn cũng có thể xem nó ở đây: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Giả sử bạn có một menu mà bạn muốn làm mờ dần và mờ dần khi di chuột. Nếu bạn opacity:0chỉ sử dụng , menu trong suốt của bạn sẽ vẫn ở đó và nó sẽ hoạt ảnh khi bạn di chuột qua khu vực ẩn. Nhưng nếu bạn thêm visibility:hidden, bạn có thể loại bỏ vấn đề này:

div {
    width:100px;
    height:20px;
}
.menu {
    visibility:hidden;
    opacity:0;
    transition:visibility 0.3s linear,opacity 0.3s linear;
    
    background:#eee;
    width:100px;
    margin:0;
    padding:5px;
    list-style:none;
}
div:hover > .menu {
    visibility:visible;
    opacity:1;
}

<div>
  <a href="#">Open Menu</a>
  <ul class="menu">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
</div>

Khả năng hiển thị là một thuộc tính có thể hoạt hình theo thông số kỹ thuật, nhưng các chuyển đổi về khả năng hiển thị không hoạt động dần dần, như người ta có thể mong đợi. Thay vào đó, các chuyển đổi trên khả năng hiển thị sẽ trì hoãn việc ẩn một phần tử. Mặt khác, làm cho một phần tử có thể nhìn thấy sẽ hoạt động ngay lập tức. Điều này giống như nó được xác định bởi thông số kỹ thuật (trong trường hợp là chức năng định thời gian mặc định) và khi nó được triển khai trong trình duyệt.

Đây cũng là một hành vi hữu ích, vì trên thực tế, người ta có thể tưởng tượng ra nhiều hiệu ứng hình ảnh khác nhau để ẩn một phần tử. Làm mờ một phần tử chỉ là một loại hiệu ứng hình ảnh được chỉ định bằng cách sử dụng độ mờ. Các hiệu ứng hình ảnh khác có thể loại bỏ phần tử bằng cách sử dụng thuộc tính biến đổi, ví dụ như thuộc tính biến đổi, hãy xem thêm tại http://taccgl.org/blog/css-transition-visibility.html

Nó thường hữu ích khi kết hợp chuyển đổi độ mờ với chuyển đổi tầm nhìn! Mặc dù độ mờ dường như làm đúng, các phần tử trong suốt hoàn toàn (với độ mờ: 0) vẫn nhận được các sự kiện chuột. Vì vậy, ví dụ: các liên kết trên một phần tử bị mờ đi chỉ với một quá trình chuyển đổi độ mờ, vẫn phản hồi các nhấp chuột (mặc dù không hiển thị) và các liên kết phía sau phần tử bị mờ không hoạt động (mặc dù có thể nhìn thấy thông qua phần tử mờ). Xem http://taccgl.org/blog/css-transition-opacity-for-fade-effects.html .

Hành vi kỳ lạ này có thể tránh được bằng cách sử dụng cả hai quá trình chuyển đổi, chuyển đổi về khả năng hiển thị và chuyển đổi về độ mờ. Do đó, thuộc tính khả năng hiển thị được sử dụng để vô hiệu hóa các sự kiện chuột cho phần tử trong khi độ mờ được sử dụng cho hiệu ứng hình ảnh. Tuy nhiên, phải cẩn thận để không ẩn phần tử trong khi hiệu ứng hình ảnh đang phát, nếu không sẽ không hiển thị được. Ở đây, ngữ nghĩa đặc biệt của quá trình chuyển đổi khả năng hiển thị trở nên hữu ích. Khi ẩn một phần tử, phần tử vẫn hiển thị trong khi phát hiệu ứng hình ảnh và bị ẩn sau đó. Mặt khác khi tiết lộ một phần tử, quá trình chuyển đổi khả năng hiển thị làm cho phần tử đó có thể nhìn thấy ngay lập tức, tức là trước khi phát hiệu ứng hình ảnh.