CSS3 过渡:*IN* 和 *OUT* 的不同过渡(或从过渡状态返回)

Posted

技术标签:

【中文标题】CSS3 过渡:*IN* 和 *OUT* 的不同过渡(或从过渡状态返回)【英文标题】:CSS3 Transition: Different transition for *IN* and *OUT* (or returning from transitioned state) 【发布时间】:2012-02-15 04:45:33 【问题描述】:

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

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

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

淡入:不透明度在 0.2 秒内从 0 到 1,背景大小在 0.2 秒内从 0 到 100%

淡出:不透明度在 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;

【问题讨论】:

【参考方案1】:

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

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 添加和删除类时,它的工作原理应该相同。

Demo

如果您想要更具体的示例,请在dabblet 或Jsfiddle 上提供reduced test case。

【讨论】:

+1 是的。这是正确的方法。分解成类并根据需要添加/删除。在 Javascript 中添加带有转换的类存在一些问题,我在这里介绍:***.com/a/8213003/918414 谢谢!使用过渡:一切都是问题。我不得不像你一样打破用逗号分隔的转换属性。我已经在答案中更新了我的工作代码。 要明确一点——“缓入”过渡并不是导致淡入和淡出的原因。这是背景上的过渡仅适用于悬停。移除悬停后,背景属性上将不再有任何过渡。

以上是关于CSS3 过渡:*IN* 和 *OUT* 的不同过渡(或从过渡状态返回)的主要内容,如果未能解决你的问题,请参考以下文章

jQuery .css() 中的 CSS3 过渡

H5+CSS3之flush介绍

CSS3 过渡延迟,进出不同时间

多个 css3 过渡类型不使用“全部”

以不同的速度进行多个同时的 CSS3 变换过渡

不透明度过渡在两个方向上都不起作用