22

原始问题...更新了以下工作代码:

我有一个在 ajax 加载事件期间出现的加载图像。该图像通过向 body 元素添加或删除“加载”类来显示/隐藏。目前,加载图像将背景大小从 0 设置为 100%,并在不透明度中淡化(反之亦然,用于“返回”过渡)。

不过,我想要完成的是让背景大小的过渡在淡出时立即发生(而不是过渡),所以:

  • 淡入:不透明度从 0 到 1 在 0.2 秒内,背景大小从 0 到 100% 在 0.2 秒内
  • 淡出:不透明度在 0.2 秒内从 1 变为 0,背景大小从 100% 变为 0应立即发生

    #loader {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        opacity: 0;
        -moz-opacity: 0;
        transition: all .2s ease-in-out
    }
    
    
    #loader .image {
        width: 400px;
        height: 138px;
        display: block;
        position: absolute;
        z-index: 2000; 
        top: 50%; 
        left: 50%; 
        margin: 0;
        background: url(assets/images/loading.png) no-repeat;
        background-size: 0 0;
        transition: all .2s ease-in-out;
        -webkit-animation: pulse 400ms ease-out infinite alternate;
        -moz-animation: pulse 400ms ease-out infinite alternate;
        -o-animation: pulse 400ms ease-out infinite alternate;
        animation: pulse 400ms ease-out infinite alternate
    }
    
    .loading #loader {z-index: 1000; background-color: rgba(255,255,255,.7)}
    
    .loading #loader .image {
        background-size: 100% 100%; 
        margin: -69px 0 0 -200px;
        transition: opacity .2s ease-in-out
    }
    

我已将此选择器的转换属性更改.loading #loader .image为“不透明度”而不是“全部”,但它仍然执行背景大小转换。

有谁知道如何使用 css3 实现上述不同的淡入淡出过渡?谢谢!


更新的工作代码

问题是将各个属性(边距、背景)分解为逗号分隔的列表。我相信使用 transition: all 会阻止你进行不同的INOUT转换。

#loader {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    -moz-opacity: 0;
    .transition(opacity,.4s);
}

#loader .image {
    width: 400px;
    height: 138px;
    display: block;
    position: absolute;
    z-index: 2000; 
    top: 50%; 
    left: 50%; 
    margin: 0;
    background: url(assets/images/loading.png) no-repeat;
    background-size: 0 0;

    -webkit-transition: margin .4s ease-in-out;
    -moz-transition: margin .4s ease-in-out;
    -o-transition: margin .4s ease-in-out;
    -ms-transition: margin .4s ease-in-out;
    transition: margin .4s ease-in-out;

    -webkit-animation: pulse 400ms ease-out infinite alternate;
    -moz-animation: pulse 400ms ease-out infinite alternate;
    -o-animation: pulse 400ms ease-out infinite alternate;
    animation: pulse 400ms ease-out infinite alternate
}

.loading #loader {z-index: 1000; background-color: rgba(255,255,255,.7)}

.loading #loader .image {
    background-size: 100% 100%; 
    margin: -69px 0 0 -200px;

    -webkit-transition: background .4s ease-in-out, margin .4s ease-in-out;
    -moz-transition: background .4s ease-in-out, margin .4s ease-in-out;
    -o-transition: background .4s ease-in-out, margin .4s ease-in-out;
    -ms-transition: background .4s ease-in-out, margin .4s ease-in-out;
    transition: background .4s ease-in-out, margin .4s ease-in-out;
}
4

1 回答 1

28

这是一个简化的测试用例:

div {
    background: blue;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

div.loading {
    opacity: 1;
    background: red;
    transition: opacity 2s ease-in-out, background 1s ease-in;
}

请注意opacity淡入和淡出的方式相同,但background唯一淡入,并在淡出时立即变为蓝色。

我用作:hover示例,但在使用 JavaScript 添加和删除类时它应该工作相同。

演示

如果您想要更具体的示例,请在dabbletJsfiddle上提供简化的测试用例

于 2012-01-20T18:16:37.717 回答