javascript - 使用@keyframes 的复杂 css 动画

Question

您好，我需要像这样创建按钮交换动画 https://d.pr/v/P8aLvl

这是通过使用一些 js 和 css 属性 opacity、scale、box-shadow 来完成的。

我尝试创建它，但我的动画看起来并不那么流畅。见https://d.pr/v/QLsLdo

看看 Button 1 和 Button 2 是如何闪烁的。我不明白我在这里错过了什么。

使用的代码如下:

谢谢!

jQuery(function() {

        var container = $(this);

        // console.log(container);

        var checkboxes = $('#button-switch');

        var checkedBoxes = $('#button-switch:checked');


        checkboxes.on('click', function(e) {

          if ( $('#button-switch:checked').length > 0 ) {

            $('.activity-buttons').addClass('selected-buttons first-animation').removeClass('second-animation');

          } else if ( $('#button-switch:checked').length === 0 ) {
            $('.activity-buttons').removeClass('selected-buttons first-animation').addClass('second-animation');
          }

        });
      
    });

.activity-buttons .btn-list {
  padding: 40px 20px;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.activity-buttons .btn-list li {
  position: relative;
  width: 200px;
  height: 40px;
}

.activity-buttons .btn-list .btn {
  position: absolute;
}

.activity-buttons .btn-list .btn.activity-selected {
  opacity: 0;
  pointer-events: none;
}

.activity-buttons.selected-buttons .btn-list .btn.activity-all {
  opacity: 0;
  pointer-events: none;
}

.activity-buttons.selected-buttons .btn-list .btn.activity-selected {
  opacity: 1;
  pointer-events: auto;
}

.activity-buttons.selected-buttons.first-animation .btn-list li .btn.activity-all {
  -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
  transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
  -webkit-animation: hideButtonScale .2s cubic-bezier(.645, .045, .355, 1);
  animation: hideButtonScale .2s cubic-bezier(.645, .045, .355, 1);
}

.activity-buttons.selected-buttons.first-animation .btn-list li .btn.activity-selected {
  -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .3s;
  transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .3s;
  -webkit-animation: showButtonShadow .3s cubic-bezier(.19, 1, .22, 1) .3s, changeBg .29s cubic-bezier(.645, .045, .355, 1) .3s, hideButtonBorder .2s cubic-bezier(.215, .61, .355, 1) .3s, buttonScaleHigh .31s cubic-bezier(.645, .045, .355, 1) .3s;
  animation: showButtonShadow .3s cubic-bezier(.19, 1, .22, 1) .3s, changeBg .29s cubic-bezier(.645, .045, .355, 1) .3s, hideButtonBorder .2s cubic-bezier(.215, .61, .355, 1) .3s, buttonScaleHigh .31s cubic-bezier(.645, .045, .355, 1) .3s;
}

.activity-buttons.selected-buttons.first-animation .btn-list li+li .btn.activity-all {
  -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .1s;
  transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .1s;
  -webkit-animation: hideButtonScale .2s cubic-bezier(.645, .045, .355, 1) .1s;
  animation: hideButtonScale .2s cubic-bezier(.645, .045, .355, 1) .1s;
}

.activity-buttons.selected-buttons.first-animation .btn-list li+li .btn.activity-selected {
  -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .4s;
  transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .4s;
  -webkit-animation: showButtonShadow .3s cubic-bezier(.19, 1, .22, 1) .4s, changeBg .29s cubic-bezier(.645, .045, .355, 1) .4s, hideButtonBorder .2s cubic-bezier(.215, .61, .355, 1) .3s, buttonScaleHigh .31s cubic-bezier(.645, .045, .355, 1) .4s;
  animation: showButtonShadow .3s cubic-bezier(.19, 1, .22, 1) .4s, changeBg .29s cubic-bezier(.645, .045, .355, 1) .4s, hideButtonBorder .2s cubic-bezier(.215, .61, .355, 1) .3s, buttonScaleHigh .31s cubic-bezier(.645, .045, .355, 1) .4s;
}

.activity-buttons.second-animation .btn-list li .btn.activity-all {
  -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .3s;
  transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .3s;
  -webkit-animation: showButtonShadow .3s cubic-bezier(.19, 1, .22, 1) .3s, changeBg .29s cubic-bezier(.645, .045, .355, 1) .3s, hideButtonBorder .2s cubic-bezier(.215, .61, .355, 1) .3s, hideButtonShadow .19s cubic-bezier(.215, .61, .355, 1) .75s, buttonScaleHigh .31s cubic-bezier(.645, .045, .355, 1) .3s, buttonScaleLow .31s cubic-bezier(.55, .055, .675, .19) .65s;
  animation: showButtonShadow .3s cubic-bezier(.19, 1, .22, 1) .3s, changeBg .29s cubic-bezier(.645, .045, .355, 1) .3s, hideButtonBorder .2s cubic-bezier(.215, .61, .355, 1) .3s, hideButtonShadow .19s cubic-bezier(.215, .61, .355, 1) .75s, buttonScaleHigh .31s cubic-bezier(.645, .045, .355, 1) .3s, buttonScaleLow .31s cubic-bezier(.55, .055, .675, .19) .65s;
}

.activity-buttons.second-animation .btn-list li .btn.activity-selected {
  -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
  transition: opacity .2s cubic-bezier(.645, .045, .355, 1);
  -webkit-animation: hideButtonScale .2s cubic-bezier(.645, .045, .355, 1);
  animation: hideButtonScale .2s cubic-bezier(.645, .045, .355, 1);
}

.activity-buttons.second-animation .btn-list li+li .btn.activity-all {
  -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .4s;
  transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .4s;
  -webkit-animation: showButtonShadow .3s cubic-bezier(.19, 1, .22, 1) .4s, changeBg .29s cubic-bezier(.645, .045, .355, 1) .4s, hideButtonBorder .2s cubic-bezier(.215, .61, .355, 1) .3s, hideButtonShadow .19s cubic-bezier(.215, .61, .355, 1) .85s, buttonScaleHigh .31s cubic-bezier(.645, .045, .355, 1) .4s, buttonScaleLow .31s cubic-bezier(.55, .055, .675, .19) .75s;
  animation: showButtonShadow .3s cubic-bezier(.19, 1, .22, 1) .4s, changeBg .29s cubic-bezier(.645, .045, .355, 1) .4s, hideButtonBorder .2s cubic-bezier(.215, .61, .355, 1) .3s, hideButtonShadow .19s cubic-bezier(.215, .61, .355, 1) .85s, buttonScaleHigh .31s cubic-bezier(.645, .045, .355, 1) .4s, buttonScaleLow .31s cubic-bezier(.55, .055, .675, .19) .75s;
}

.activity-buttons.second-animation .btn-list li+li .btn.activity-selected {
  -webkit-transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .1s;
  transition: opacity .2s cubic-bezier(.645, .045, .355, 1) .1s;
  -webkit-animation: hideButtonScale .2s cubic-bezier(.645, .045, .355, 1) .1s;
  animation: hideButtonScale .2s cubic-bezier(.645, .045, .355, 1) .1s;
}

@-webkit-keyframes hideButtonScale {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(.5);
    transform: scale(.5);
  }
}

@keyframes hideButtonScale {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(.5);
    transform: scale(.5);
  }
}

@-webkit-keyframes showButtonScale {
  from {
    -webkit-transform: scale(.5);
    transform: scale(.5);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes showButtonScale {
  from {
    -webkit-transform: scale(.5);
    transform: scale(.5);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes buttonScaleHigh {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
}

@keyframes buttonScaleHigh {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
}

@-webkit-keyframes buttonScaleLow {
  from {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes buttonScaleLow {
  from {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes showButtonScale {
  from {
    background: transparent;
  }
  to {
    background: #fff;
  }
}

@-webkit-keyframes showButtonShadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 8px 16px rgba(208, 201, 214, .5);
  }
}

@keyframes showButtonShadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 8px 16px rgba(208, 201, 214, .5);
  }
}

@-webkit-keyframes hideButtonShadow {
  from {
    box-shadow: 0 8px 16px rgba(208, 201, 214, .5);
  }
  to {
    box-shadow: none;
  }
}

@keyframes hideButtonShadow {
  from {
    box-shadow: 0 8px 16px rgba(208, 201, 214, .5);
  }
  to {
    box-shadow: none;
  }
}

@-webkit-keyframes hideButtonBorder {
  from {
    border-color: #eaeaea;
  }
  to {
    border-color: transparent;
  }
}

@keyframes hideButtonBorder {
  from {
    border-color: #eaeaea;
  }
  to {
    border-color: transparent;
  }
}

@-webkit-keyframes showButtonBorder {
  from {
    border-color: transparent;
  }
  to {
    border-color: #eaeaea;
  }
}

@keyframes showButtonBorder {
  from {
    border-color: transparent;
  }
  to {
    border-color: #eaeaea;
  }
}

@-webkit-keyframes opacityHigh {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes opacityHigh {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="activity-buttons">
  <ul class="btn-list justify-content-center">
    <li>
      <button type="button" class="btn btn-outline-secondary left-align-icon activity-all" data-toggle="modal" data-target="#deleteModal">Button 1</button>
      <button type="button" class="btn btn-outline-secondary left-align-icon activity-selected" data-toggle="modal" data-target="#deleteModal"><i class="icon-delete_outline"></i> Delete selected</button>
    </li>
    <li>
      <button class="btn btn-outline-secondary left-align-icon activity-all">Button 2</button>
      <button class="btn btn-outline-secondary left-align-icon activity-selected"><i class="icon-vertical_align_top"></i> Export selected</button>
    </li>
  </ul>
</div>

<input type="checkbox" id="button-switch" class="ml-5">

Answer 1

它可能会抖动，因为它正在返回到原来的位置。试试 animation-fill-mode: forwards;这将使元素在动画完成时保持相同状态，而不是恢复到原始状态。