# 1.transition 属性

## 简介

transition(过渡)) 是指从一个状态到另一个状态的变化。比如当鼠标在某个元素上悬停时，我们会修改它的样式，采用 transition 可以创建一个平滑的动画效果。

## 简单用法

### 代码

```css
transition: background 0.5s linear;
```

### 意义

在 0.5 秒的时间里，按照 linear 的时间函数(timing-function)来改变某个元素的 background 属性。

### 示例

当鼠标在按钮上悬停时(hover)改变按钮的 background。

*   html

    ```markup
      <button>按钮</button>
    ```
*   css

    ```css
      button {
          padding:1em 2em;
          background: #fff;
          transition: background 1s linear;
      }

      button:hover {
          background: deeppink;
      }
    ```
*   效果

    ![深度录屏\_选择区域\_20191108030921-201911831515](http://img.cdn.sugarat.top/%E6%B7%B1%E5%BA%A6%E5%BD%95%E5%B1%8F_%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F_20191108030921-201911831515.gif)

如果我们把 `transition: background 1s linear` 放到hover中则只有鼠标离开时才有动画效果;

### 简写transition全部参数

`transition:[property] [duration] [delay] [timeing-function]`

### transition全写

* `transition-property:all;` / _规定过渡css属性名称_ /
* `transition-duration: 1s;`/ _过渡持续时间 3s===&#x33;_&#x31;000ms \*/
* `transition-delay: 0.1s;`/ _过渡效果延迟开始时间_ /
* `transition-timing-function: ease-in;`/ _时间函数_ /

## 时间函数Steps()

### 参数

1. 动画完成步数
   * 参数类型:Number
2. 第一个步进点
   * 参数:start/end
   * 默认:end

### 示例

*   html

    ```markup
      <div id="block"></div>
    ```
*   css

    ```css
      #block{
          position: absolute;
          left: 50%;
          top: 30%;
          transform: translateX(-50%);
          width: 12em;
          height: 12em;
          background: #000;
          transition: all 1s steps(5,end);
          /*transition: all 1s linear;*//*平滑过渡*/
      }

      #block:hover{
          width: 2em;
          height: 2em;
      }
    ```
* 效果

![深度录屏\_选择区域\_20191108082955-201911883119](http://img.cdn.sugarat.top/%E6%B7%B1%E5%BA%A6%E5%BD%95%E5%B1%8F_%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F_20191108082955-201911883119.gif)

## 添加多个过渡

*   html

    ```markup
      <div id="block"></div>
    ```
*   css

    ```css
      #block{
          position: absolute;
          left: 50%;
          top: 30%;
          transform: translateX(-50%);
          width: 12em;
          height: 12em;
          background: #000;
          transition: width 1s linear,height 1s linear,background 1s ease-in-out;
      }

      #block:hover{
          background: burlywood;
          width: 2em;
          height: 2em;
      }
    ```
* 效果

![深度录屏\_选择区域\_20191108084146-201911884225](http://img.cdn.sugarat.top/%E6%B7%B1%E5%BA%A6%E5%BD%95%E5%B1%8F_%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F_20191108084146-201911884225.gif)

## 添加移除类触发过渡

简单示例

* 效果

![深度录屏\_选择区域\_20191108085505-201911885546](http://img.cdn.sugarat.top/%E6%B7%B1%E5%BA%A6%E5%BD%95%E5%B1%8F_%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F_20191108085505-201911885546.gif)

* html

```markup
<body>
    <button id="show">Show it</button>
    <div id="wait-show" class="hide">
        <h1>Title</h1>
        <p>Pressing the button shows this content.</p>
    </div>
</body>
```

* css

```css
body {
  background-color: #134;
  transition: background 0.5s ease-out;
  font-family: HelveticaNeue, Arial, Sans-serif;
}
body.on {
  background-color: #099;
}

button{
  background: transparent;
  border: 2px solid #fff;
  border-radius: 1em;
  color: #fff;
  cursor: pointer;
  font-size: 24px;
  padding: 1em 2em;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease-out;
  outline: 0;
}

button:hover{
  background: #fff;
  color: #099;
}

#wait-show{
  color: #fff;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: all 0.5s cubic-bezier(.83,-0.43,.21,1.42);
}

.hide{
  opacity: 0;
  top:calc(50% + 10em);
}

.show{
  opacity: 1;
  top: calc(50% + 6em);
}
```

* js

```javascript
 let showBtn = document.getElementById('show');
    let body = document.body;
    let waitShow = document.getElementById('wait-show');

    /**
    * 监听点击事件
    */
    showBtn.addEventListener('click', function (e) {
        // 更改body颜色
        body.className = body.className === 'on' ? '' : 'on';

        waitShow.className = waitShow.className === 'hide' ? 'show' : 'hide';
    })
    document.getElementsByTagName('body')
```
