Question

我想知道如何使用CSS3媒体查询响应式网站将'淡入淡出'效果添加到我使用响应式网站显示或消失的元素 。我已经弄清楚如何使用linear转换，但是真的想使用淡入淡出。

Answer 1

要使用CSS执行此操作，您需要使用transitions。我可以考虑使用CSS过渡淡入/淡出元素的唯一方法是将opacity设置为零，然后将opacity设置为一个动画，但不能用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;
}

将“淡出/淡入”添加到响应式媒体查询中

1 个答案: