Question

所以我有一个带有图像的div。点击后图片会扩大到更大的尺寸;高度和宽度都已过渡。我想首先扩大高度，然后是宽度。我想知道，有没有办法只用CSS做这个？

到目前为止我的代码：

CSS：

.resize {
  background-image: url('http://www.purosoftware.com/escritorio-fondo-de-pantalla/imagenes/03-fondo-de-pantalla-playa-en-alta-definicion-hd-resolucion-1920x1200-01.jpeg');
  background-size: contain;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
  transition: height 1000ms ease; // transition height right away
  transition: width 1000ms 500ms ease; // transition width with delay
  width: 200px;
  height: 200px;
}
.resize.larger {
  height: 800px;
  width: 800px;
}

HTML（使用Angularjs标记）

<!-- on click, apply 'larger' class, then remove larger class on second click -->
<div class='resize' ng-init="clicked = false"
     ng-class="{'larger': clicked}" ng-click="clicked =! clicked">

</div>

我遇到的第二个问题是我想切换高度和宽度的延迟，这意味着我想首先过渡宽度，然后是高度。

Plunker：http://plnkr.co/edit/97V80ckSypkLJPLTT2UW?p=preview

Answer 1

你可以声明多个转换，但是用逗号,分隔，不再设置转换，因为它会覆盖前一个转换：

.resize {
      transition: width 1s ease,
                  height 1s .5s ease;
}

检查下面的代码段。

.resize {
  background-image: url('http://www.purosoftware.com/escritorio-fondo-de-pantalla/imagenes/03-fondo-de-pantalla-playa-en-alta-definicion-hd-resolucion-1920x1200-01.jpeg');
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
  transition: width 1s ease, height 1s .5s ease;
  width: 200px;
  height: 200px;
}
.resize:hover {
  height: 400px;
  width: 400px;

<div class="resize"></div>

Answer 2

您可以用逗号分隔它们

{
transition: 
height 1000ms ease,
width 1000ms 500ms ease; 
}

Answer 3

添加已提供的答案，用于编写过渡属性的proper syntax为：

transition: [property] [duration] <timing function> <delay>;

只需写下：

transition: height 1s linear, width 1s ease 1s;

在width完成转换后立即调用height的转换。

CSS不同属性的延迟

3 个答案: