原始问题...更新了以下工作代码:
我有一个在 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 会阻止你进行不同的IN和OUT转换。
#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;
}