javascript - 将 'Fade out/Fade in' 添加到响应式媒体查询

Question

我想知道如何将“淡入/淡出”效果添加到我使用使用 CSS3 媒体查询的响应式网站使出现或消失的元素.我已经弄清楚如何使用 linear 过渡，但我真的很想使用淡入淡出。

Answer 1

要使用 CSS 做到这一点，您需要使用 transitions。我能想到的使用 CSS 过渡淡入/淡出元素的唯一方法是将 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;
}