CSS CSS3 过渡：*IN* 和 *OUT* 的不同过渡（或从过渡状态返回）

CSS3 Transition: Different transition for *IN* and *OUT* (or returning from transitioned state)

提问by HandiworkNYC.com

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).

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

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
  }
  

• 淡入：0.2 秒内不透明度从 0 到 1，背景大小从 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
  }
  

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

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

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

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

---

---

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 INand OUTtransitions.

问题是将单个属性（边距、背景）分解为逗号分隔的列表。我相信使用 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;
}

回答by bookcasey

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 opacityfades the same in and out, but the backgroundonly fades in, and immediately turns blue on fade out.

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

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

我:hover举了一个例子，但在使用 JavaScript 添加和删除类时它应该工作相同。

Demo

演示

If you'd like a more specific example please provide a reduced test caseon dabbletor Jsfiddle.

如果您想要更具体的示例，请在dabblet或Jsfiddle上提供简化的测试用例。