Hoạt ảnh CSS3: hiển thị + độ mờ

Tôi gặp sự cố với hoạt ảnh CSS3.

.child {
    opacity: 0;
    display: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    display: block;
}

Mã này chỉ hoạt động nếu tôi xóa thay đổi của display.

Tôi muốn thay đổi màn hình ngay sau khi di chuột nhưng độ mờ phải được thay đổi bằng cách sử dụng chuyển đổi.

Dựa trên câu trả lời của Michaels, đây là mã CSS thực tế để sử dụng

.parent:hover .child
{
    display: block;

    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

Bạn có thể làm với hoạt ảnh CSS:

0% display:none ; opacity: 0;
1% display: block ; opacity: 0;
100% display: block ; opacity: 1;

Nếu có thể - sử dụng visibilitythay vìdisplay

Ví dụ:

.child {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.parent:hover .child {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s, visibility 0.3s;
}

Cách giải quyết này hoạt động:

1. xác định “khung hình chính”:

   @-webkit-keyframes fadeIn { 
     0% { opacity: 0; }
     20% { opacity: 0; }
     40% { opacity: 0.3; }
     60% { opacity: 0.5; }
     80% { opacity: 0.9; }
     100% { opacity: 1; }
   }
   
   @keyframes fadeIn {
     0% { opacity: 0; }
     20% { opacity: 0; }
     40% { opacity: 0.3; }
     60% { opacity: 0.5; }
     80% { opacity: 0.9; }
     100% { opacity: 1; }
   }

2. Sử dụng “khung hình chính” này trên “di chuột”:

   div a span { 
     display: none;
   }
   
   div a:hover span {
     display: block;
   
     -webkit-animation-name: fadeIn;
     -webkit-animation-duration: 1s;
     animation-name: fadeIn;
     animation-duration: 1s;
   }

Tôi đã sử dụng điều này để đạt được nó. Chúng mờ dần khi di chuột nhưng không tốn không gian khi ẩn, hoàn hảo!

.child {
    height: 0px;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease-in-out;
}

.parent:hover child {
    height: auto;
    opacity: 1;
    visibility: visible;
}

Tôi đã thay đổi một chút nhưng kết quả là đẹp.

.child {
    width: 0px;
    height: 0px;
    opacity: 0;
}

.parent:hover child {
    width: 150px;
    height: 300px;
    opacity: .9;
}

Cảm ơn tất cả mọi người.

Có một phương pháp hay khác để thực hiện việc này bằng cách sử dụng sự kiện con trỏ:

.child {
    opacity: 0;
    pointer-events: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    pointer-events: all;
}

Rất tiếc, tính năng này không được hỗ trợ trong IE10 trở xuống.

Tôi đã từng gặp vấn đề tương tự. Tôi đã thử sử dụng hoạt ảnh thay vì chuyển tiếp - theo đề xuất của @MichaelMullany và @Chris - nhưng nó chỉ hoạt động với các trình duyệt webkit ngay cả khi tôi sao chép-dán các tiền tố "-moz" và "-o".

Tôi đã có thể giải quyết vấn đề bằng cách sử dụng visibilitythay vì display. Điều này phù hợp với tôi vì phần tử con của tôi làposition: absolute vậy, vì vậy luồng tài liệu không bị ảnh hưởng. Nó cũng có thể làm việc cho những người khác.

Đây là mã gốc sẽ trông như thế nào khi sử dụng giải pháp của tôi:

.child {
    position: absolute;
    opacity: 0;
    visibility: hidden;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    position: relative;
    opacity: 0.9;
    visibility: visible;
}

Nếu bạn đang kích hoạt thay đổi với JS, giả sử khi nhấp chuột, có một giải pháp tốt.

Bạn thấy sự cố xảy ra vì hoạt ảnh bị bỏ qua trên màn hình: không có phần tử nào nhưng trình duyệt áp dụng tất cả các thay đổi cùng một lúc và phần tử không bao giờ hiển thị: block trong khi không hoạt ảnh cùng một lúc.

Mẹo là yêu cầu trình duyệt kết xuất khung hình sau khi thay đổi chế độ hiển thị nhưng trước khi kích hoạt hoạt ảnh.

Đây là một ví dụ về JQuery:

    $('.child').css({"display":"block"});
    //now ask the browser what is the value of the display property
    $('.child').css("display"); //this will trigger the browser to apply the change. this costs one frame render
    //now a change to opacity will trigger the animation
    $('.child').css("opacity":100);

Trên các phần tử tuyệt đối hoặc cố định, bạn cũng có thể sử dụng z-index:

.item {
    position: absolute;
    z-index: -100;
}

.item:hover {
    z-index: 100;
}

Các phần tử khác nên có chỉ số z từ -100 đến 100 ngay bây giờ.

Tôi biết, đây thực sự không phải là giải pháp cho câu hỏi của bạn, bởi vì bạn yêu cầu

màn hình + độ mờ

Cách tiếp cận của tôi giải quyết một câu hỏi tổng quát hơn, nhưng có thể đây là vấn đề cơ bản cần được giải quyết bằng cách sử dụng displaykết hợp vớiopacity .

Mong muốn của tôi là đưa Element ra khỏi con đường khi nó không được nhìn thấy. Giải pháp này thực hiện chính xác điều đó: Nó di chuyển phần tử ra khỏi phần tử và điều này có thể được sử dụng để chuyển đổi:

.child {
  left: -2000px;
  opacity: 0;
  visibility: hidden;
  transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
}

.parent:hover .child {
  left: 0;
  opacity: 1;
  visibility: visible;
  transition: left 0s, visibility 0s, opacity 0.8s;
}

Mã này không chứa bất kỳ tiền tố trình duyệt nào hoặc các bản hack tương thích ngược. Nó chỉ minh họa khái niệm cách phần tử được chuyển đi vì nó không cần thiết nữa.

Phần thú vị là hai định nghĩa chuyển đổi khác nhau. Khi con trỏ chuột đang di chuột qua .parentphần tử, .childphần tử cần được đưa vào vị trí ngay lập tức và sau đó độ mờ sẽ được thay đổi:

transition: left 0s, visibility 0s, opacity 0.8s;

Khi không có di chuột hoặc con trỏ chuột bị di chuyển khỏi phần tử, người ta phải đợi cho đến khi thay đổi độ mờ hoàn tất trước khi phần tử có thể được di chuyển khỏi màn hình:

transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;

Di chuyển đối tượng ra xa sẽ là một giải pháp thay thế khả thi trong trường hợp cài đặt display:nonekhông phá vỡ bố cục.

Tôi hy vọng tôi đã đánh một cái đinh vào đầu cho câu hỏi này mặc dù tôi đã không trả lời nó.

Một điều mà tôi đã làm là đặt lề của trạng thái ban đầu là một cái gì đó như "margin-left: -9999px" để nó không xuất hiện trên màn hình, sau đó đặt lại "margin-left: 0" trên trạng thái di chuột. Giữ nó "display: block" trong trường hợp đó. Đã lừa cho tôi :)

Chỉnh sửa: Lưu trạng thái và không hoàn nguyên về trạng thái di chuột trước đó? Ok ở đây chúng ta cần JS:

<style>
.hovered { 
    /* hover styles here */
}
</style>

<script type="text/javascript">
$('.link').hover(function() {
   var $link = $(this);
   if (!$link.hasclass('hovered')) { // check to see if the class was already given
        $(this).addClass('hovered');
   } 
});
</script>

Để có hoạt ảnh trên cả hai cách onHoverIn / Out, tôi đã thực hiện giải pháp này. Hy vọng nó sẽ giúp ích cho ai đó

@keyframes fadeOutFromBlock {
  0% {
    position: relative;
    opacity: 1;
    transform: translateX(0);
  }

  90% {
    position: relative;
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
  }
}

@keyframes fadeInFromNone {
  0% {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
  }

  1% {
    position: relative;
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    position: relative;
    opacity: 1;
    transform: translateX(0);
  }
}

.drafts-content {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  animation: fadeInFromNone 1s ease-in;
  will-change: opacity, transform;

  &.hide-drafts {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
    animation: fadeOutFromBlock 0.5s ease-out;
    will-change: opacity, transform;
  }
}

LÀM THẾ NÀO ĐỂ HÌNH THÀNH KHẢ NĂNG HOẠT ĐỘNG VỚI CSS:
đây là mã của tôi:
mã CSS

.item {   
    height:200px;
    width:200px;
    background:red;
    opacity:0;
    transition: opacity 1s ease-in-out;
}

.item:hover {
    opacity: 1;
}
code {
    background: linear-gradient(to right,#fce4ed,#ffe8cc);
}

<div class="item">

</div>
<p><code> move mouse over top of this text</code></p>

hoặc kiểm tra tệp demo này

function vote () {
var vote = getElementById ("yourOpinion")
if (this.workWithYou):
vote + = 1};
cười lớn

display:không thể chuyển đổi. Có thể bạn sẽ cần sử dụng jQuery để làm những gì bạn muốn.