Question

我正在尝试设置幻灯片菜单的动画，当菜单幻灯片时，底层叠加淡入淡出。对于滑入，这没有问题，叠加层只是弹出，我只是以与菜单幻灯片相同的速率为background更改设置动画。

但是，对于滑出动画，我必须保持背景覆盖可见，直到淡入淡出完成。所以我假设我可以在left更改动画时将更改延迟到background属性。但这不起作用，背景会立即消失。

正在使用的CSS：

div#main-menu {
  position: fixed;
  z-index: 20;
  background-color: #ccc;
  color: #fff;
  -webkit-transition: all 1.5s;
  transition: all 1.5s;
  top: 0;
  width: 25%;
  height: 100%;
  left: -25%;
}

div#menu-overlay {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  border: 2px solid green;
}

body.menu-open div#main-menu {
  left: 0;
}
body.menu-open div#menu-overlay {
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  transition: background 1.5s;
}
body:not(.menu-open) div#menu-overlay {
  left: -100%;
  background: rgba(0, 0, 0, 0);
  transition: left 0 linear 1.5s;
  transition: background 1.5s linear 0;
}

（叠加层周围的绿色边框就是为了在透明时跟踪它。）

我在这里做错了什么？

这是一个小提琴：http://jsfiddle.net/K3e4U/4/

Answer 1

更改

transition: left 0 linear 1.5s;
transition: background 1.5s linear 0;

到

transition: left 0 linear 1.5s, background 1.5s linear 0;

如果您查看检查器视图，transition: left 0 linear 1.5s;因为您声明另一个transition而被取消。

交错动画的属性

1 个答案: