text 使用此Transition SCSS Mixin将CSS过渡添加到元素。轻松设置颜色，宽度和填充等属性的动画，以创建淡入淡出效果

Posted 2021-05-02

<div class="card">
  <button class="fade">transition mixin</button>
  <p>mouseover to see fade effect</p>
</div>
<div class="card">
  <button class="scale">transition mixin</button>
  <p>mouseover to see scale effect</p>
</div>

/* element {
  transition: [property] [duration] [timing-function] [delay];
} */

@mixin transition($what: all, $time: 0.2s, $how: ease-in-out, $delay: .01s) {
  -webkit-transition: $what $time $how;
  -moz-transition:    $what $time $how;
  -ms-transition:     $what $time $how;
  -o-transition:      $what $time $how;
  transition:         $what $time $how;
}

/* mixin usage */
button.fade {
  @include transition(all,0.5s,ease-out);
  color: #00FFFF;
  background-color: #0080FF;
  border-color: #00FFFF;
  &:hover {
    color: #0080FF;
    background-color: #00FFFF;
    border-color: #0080FF;
  }
}
button.scale {
  @include transition(all,0.3s,ease-out);
  color: #00FFFF;
  background-color: #0080FF;
  width: 18rem;
  position: relative;
  top: 0;
  &:hover {
    width: 22rem;
    top: 10px;
  }
}

/* demo styles */
.card {
  margin: 2em auto;
  text-align: center;
}
button {
  border: 5px solid #00FFFF;
  padding: .9em 2em 1em;
  font-size: 1.5rem;
}
body {
  text-align: center;
}