CSS3转换：*IN*和*OUT* (或从过渡状态返回)的不同转换
CSS3转换：*IN*和*OUT* (或从过渡状态返回)的不同转换
提问于 2012-01-20 16:16:32
原始问题..。以下更新的工作代码：
我有一个在ajax加载事件中出现的加载映像。图像通过添加或删除body元素中的“body”类来显示/隐藏。目前，加载图像动画背景大小从0到100%，并在不透明度减弱(反之亦然的‘返回’过渡)。
不过，我想要完成的是让背景大小的转换在淡出时立即发生(而不是过渡)，所以：
- 淡入：.2s中的不透明度从0到1，.2s中的背景大小从0到100%
- 淡出：.2s中的不透明度从1到0，背景尺寸从100%到0应该立即发生。 装载机{宽度: 100%；高度: 100%；位置:固定；顶部: 0；左边: 0；z-索引：-1；不透明度: 0；-moz-不透明度: 0；转换:所有.2s轻松进入-out}# .image {400 50；高度:138 50；显示:块；位置:绝对；z-指数: 2000；顶部: 50%；左: 50%；边缘: 0；背景:url(资产/图像/加载.moz)不重复；背景大小: 0；转换:所有.2s轻松进入-out；-webkit-动画:脉冲400 moz轻松-输出无限替代；-moz-动画:脉冲400 moz轻松-输出无限替代；-o动画:脉冲400 moz轻松-输出无限替代；动画:脉冲400 moz轻松-输出无限交替} .loading #加载器{z-索引: 1000；背景颜色:rgba(255,255，.7)} .loading #加载程序.image {背景大小: 100%；边距：-69 px0-200 in；过渡:不透明.2s轻松进入}
我已经将这个选择器.loading #loader .image的转换属性更改为“不透明”，而不是“全部”，但是它仍然执行背景大小的转换。
有人知道如何用css3实现上述不同的淡入和淡出转换吗？谢谢!
更新的工作代码
问题是将单个属性(边距、背景)划分为逗号分隔的列表。我相信使用转换:一切都将阻止你能够做不同的进出转换。
#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;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2012-01-20 18:16:37
下面是一个简化的测试用例：
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添加和删除类时，它的工作方式应该是相同的。
演示
如果您想要一个更具体的例子，请提供一个简化测试用例 on 达布莱或小提琴手。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8944456
复制相关文章
相似问题
腾讯云开发者
