CSS中的过渡动画

过渡是一种动画，是从一种状态过渡到另一种状态，在过渡前，浏览器会计算页面的新页面结构以及完成重绘，过渡会自动双向运行，因此只要状态一反转，反向动画就会被运行。

@Component({
  selector: 'app-home',
  template: `
  <button>点击</button>
  `,
  styles: [`
    button {
      border: 0;
      padding: .5em 1em;
      color: #fff;
      border-radius: .25em;
      background-color: #277ff9;
      box-shadow: 0 .25em 0 rgba(23,59,109,0.3), inset 0 1px 0 rgba(0,0,0,0.3);
      transition: all 150ms;
    }

    button:active {
      box-shadow: 0 0 0 rgba(23,59,109,0.3), inset 0 1px 0 rgba(0,0,0,0.3);
      transform: translateY(.25em);
    }
  `]
})

按钮过渡效果.gif
在按钮被激活时，可以把它沿y轴向下平移与y轴阴影相同的距离，同时，也把阴影的偏移量减少为0。
transform: all 150ms;是说明对于所有受到过渡动画影响的元素的属性，过渡时间设为150毫秒，针对用户的交互效果来看，用户的界面组件的过渡多数应该在0.3秒内完成，否则就会导致拖沓感。
上面的这个是一个简写的形式，它的完整的写法形式是：

transition-property: all;
transition-duration: .15s;

如果我们不希望所有的元素属性受到影响，只希望作用到box-shadow, transform，那么可以改写为：

transition: box-shadow 150ms, transform 150ms;

在指定带前缀的属性时，transition-property本身也需要加上前缀。比如：transition: transform.25s针对旧的版本，也就是WebKit浏览器，需要写成-webkit-transition: -webkit-transform .25s，即属性和作为值的属性均需要加上前缀，否则在旧版本的浏览器不起作用。