transition的使用

transition的基本语法为：

transition: 要修改的属性 整个transition的时间 变形的方式 开始transition的时间;

注意点：

时间一定要加上s（秒）这个单位；谁transition给谁加这个属性；要修改的属性可以写作all.

    .square {
      width: 20px;
      height: 20px;
      margin-top: 20px;
      background: pink;
      transition: all 1s;
      &:hover {
        width: 30px;
        height: 30px;
        background: plum;
      }
    }

 

 

1、进度条。当用户hover进度条的时候，进度条前进。 

<div class="bar">
          <div class="bar_in"></div>
</div>

 

    .bar {
      width: 300px;
      height: 10px;
      padding: 1px;
      border: 1px solid red;
      border-radius: 10px;
      background: #fff;
      .bar_in {
        width: 20px;
        height: 10px;
        border-radius: 10px;
        background: red;
        transition: width 2.5s;
      }
      &:hover .bar_in {
        width: 300px;
      }
    }

 

 

2、小米图标logo，一个方块里包含一个图标，一旦鼠标hover的时候换为另一个图标

          <div class="logo-wrap">
            <img src="@/icons/svg/404.svg" />
            <img src="@/icons/svg/email.svg" />
          </div>

    .logo-wrap {
      position: absolute;
      width: 100px;
      height: 50px;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      transition: all 0.3s;
      img {
        float: left;
        width: 50px;
        height: 50px;
      }
      &:hover {
        left: -50px;
      }
    }