CSS3转换：* IN *和* OUT *的不同转换（或从转换状态返回） [英] CSS3 Transition: Different transition for *IN* and *OUT* (or returning from transitioned state)

查看：277
本文介绍了CSS3转换：* IN *和* OUT *的不同转换（或从转换状态返回）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

原始问题...以下更新的工作代码：



在ajax负载事件期间。该图像通过向body元素添加或删除加载类来显示/隐藏。目前，加载图片动画的背景大小从0到100％，并褪色的不透明度（反之亦然的返回转换）。



完成，但是，背景尺寸转换立即发生（不转换）淡出，因此：




  • 淡入：不透明度从0到1 in .2s，背景大小从0到100％in .2s

  • 淡出：不透明度从1到0在.2s，背景大小从100％ 



      #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 sleep-out infinite alternate 
    } 
     
     .loading #loader {z-index：1000; background-color：rgba（255,255,255，.7）} 
     
    。加载#loader .image {
     background-size：100％100％; 
     margin：-69px 0 0 -200px; 
     transition：opacity .2s ease-in-out 
    }




我已将此选择器的转换属性更改为 .loading #loader .image 更改为opacity，而不是all仍然执行背景大小的转换。



有没有人知道如何实现上面用css3描述的不同的淡入和淡出转换？非常感谢！





更新工作代码 b
$ b

问题是将单个属性（margin，background）分解为逗号分隔的列表。我相信使用转换：所有会阻止您进行不同的 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 sleep-out infinite alternate; 
 -o-animation：pulse 400ms ease-out infinite alternate; 
 animation：pulse 400ms sleep-out infinite alternate 
} 
 
 .loading #loader {z-index：1000; background-color：rgba（255,255,255，.7）} 
 
。加载#loader .image {
 background-size：100％100％; 
 margin：-69px 0 0 -200px; 
 
 -webkit-transition：background .4s易于输入，margin .4s易于输入; 
 -moz-transition：background .4s easy-in-out，margin .4s easy-in-out; 
 -o-transition：background .4s缓入，margin .4s缓入; 
 -ms-transition：background .4s easy-in-out，margin .4s ease-in-out; 
 transition：background .4s easy-in-out，margin .4s easy-in-out; 
}


解决方案

：

  div {background：blue;不透明度：0; transition：opacity 2s ease-in-out;} 
 div.loading {opacity：1;背景：红色; transition：opacity 2s ease-in-out，background 1s ease-in;}

code> opacity 淡入淡出，但背景只会淡入，并立即变为蓝色淡出。 p>

我使用：hover 为例，但是当使用JavaScript添加和删除类时，它应该是一样的。 p>

演示



如果您想要更具体的示例，请在缩减测试用例 ：//dabblet.com/> dabblet 或 Jsfiddle 。


Original Question... updated working code below:

I have a loading image which comes up during an ajax load event. The image shows/hides by adding or removing a "loading" class to the body element. Currently, the loading image animates background-size from 0 to 100%, and fades in the opacity (vice versa for the 'return' transition).

What I want to accomplish, though, is to have the background-size transition happen instantly (not transition) on the fade out, so:

  • Fade in: opacity from 0 to 1 in .2s, background size from 0 to 100% in .2s

  • Fade out: opacity from 1 to 0 in .2s, background size from 100% to 0 should happen instantly

    #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
}

I've changed transition property for this selector .loading #loader .image to "opacity" rather than "all", but it still performs the background-size transition.

Does anyone know how to achieve the different fade in and fade out transitions described above with css3? Thanks!

Updated Working Code

The issue was breaking out the individual properties (margin, background) into a comma separated list. I believe using transition: all will prevent you from being able to do different IN and OUT transitions.

#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;
}

解决方案

Here is a simplified test case:

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;}

Notice how the opacity fades the same in and out, but the background only fades in, and immediately turns blue on fade out.

I used :hover as an example, but it should work the same when adding and removing classes with JavaScript.

Demo

If you'd like a more specific example please provide a reduced test case on dabblet or Jsfiddle.

这篇关于CSS3转换：* IN *和* OUT *的不同转换（或从转换状态返回）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆