在響應式媒體查詢中添加“淡出/淡入”

Question

我想知道如何在 使用CSS3媒體查詢的響應式網站上 ，將“淡入/淡出”效果添加到使出現或消失的元素上。 我已經弄清楚了如何使用linear過渡，但真的想使用淡入淡出。

Answer 1

要使用CSS做到這一點，您將需要使用transitions 。 我認為可以通過CSS過渡淡入/淡出元素的唯一方法是將opacity設置為零，然后將opacity動畫opacity 1，但是您不能僅使用CSS來做到這一點（您需要一些JS來正確安排時間）：

$(window).on('resize', function () {
    if ($(this).width() <= 480) {
        //do code for less than 480px wide 
        $('#some-element').css('opacity', 0).addClass('transition').css('opacity', 1);
        setTimeout(function () {
            $('#some-element').removeClass('transition');
        }, 500);
    }
}).trigger('resize');

transition CSS類將設置transition規則的位置：

.transition {
    -webkit-transition : opacity 0.5s linear;
       -moz-transition : opacity 0.5s linear;
        -ms-transition : opacity 0.5s linear;
         -o-transition : opacity 0.5s linear;
            transition : opacity 0.5s linear;
}