如何使用 JS 为左侧的宽度大小设置动画？

Question

我正在尝试学习如何创建类似于此动画的内容： https://dribbble.com/shots/5311359-Diprella-Login

所以目前我遇到的问题是 "Green" 或 "Blue" 在我的情况下扩展 > 移动 > 收缩我无法使用 "Width" 获得相同的效果，因为它从右侧，我希望它在移动后从左侧收缩。

附上我的 CodePen： https://codepen.io/MariusZMM/pen/jJWebK

使用的 JS：

var start = anime.timeline({
  easing: 'easeInOutSine',
  autoplay: false
});

start
  .add({
    targets: '.square',
    width: 600,
    duration: 500
  })
  .add(
    {
      targets: '.square',
      translateX: 400,
      duration: 500
    },
    '-=100'
  )
  .add({
    targets: '.square',
    width: 400,
    duration: 500
  });

document.querySelector('.btn').onclick = function() {
  start.play();
  if (start.began) {
    start.reverse();
  }
};

我也尝试过使用 Padding，但我认为 AnimeJS 不喜欢值 0 0 0 300px

Answer 1

看看这个：

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .window {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #c73030;
            z-index: 9999;
        }

        #box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 1000px;
            height: 500px;
            background-color: #f7986c;
            z-index: -999;
        }

        #square {
            position: absolute;
            top: 0;
            width: 400px;
            height: 100%;
            background-color: cornflowerblue;
        }

        #btn {
            position: absolute;
            width: 300px;
            height: 70px;
            top: 80%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #444;
        }
    </style>

</head>

<body>
    <div id="box">

        <div id="square">
            <button id="btn">
                <div id="sI">Sign In</div>
            </button>
        </div>

    </div>


    <script>
        var animated = false;

        function animate() {
            $('#square').animate({
                width: '600',
                right: '0'
            }, 300, 'swing');
            $('#square').animate({
                width: '400'
            }, 300, 'swing');
            $('#square').css("left", "");
            animated = true;
        }

        function reverseAnimate() {
            $('#square').animate({
                width: '600',
                left: '0'
            }, 300, 'swing');
            $('#square').animate({
                width: '400'
            }, 300, 'swing');
            $('#square').css("right", "");
            animated = false;
        }

        $('#btn').click(function() {
            if (!animated) { //If it has not been animated, animate!
                animate();
            } else {
                reverseAnimate();
            }
        });
    </script>
</body>

</html>

我使用了 jQuery 并更改了一些内容以使其看起来更像示例。另外，我喜欢你对 .reverse() 的使用，但我没有在我的案例中使用它。

Answer 2

这是动画的 CSS 版本。

我正在使用一个视觉上隐藏的复选框，按钮是一个 label 来控制复选框，CSS 动画在选中状态下切换。

唯一的问题是它在加载时反向执行初始动画。

编辑： 我实际上通过对 CSS (:not(indeterminate)) 的轻微调整和加载的附加 JS 片段来设置indeterminate.

复选框

const checkbox = document.getElementById('sign-in-state');
checkbox.indeterminate = true;

@keyframes login {
 0% {
  left: 0;
  width: 40%;
 }
 50% {
  width: 60%;
 }
 100% {
  left: 60%;
  width: 40%;
 }
}
@keyframes logout {
 0% {
  left: 60%;
  width: 40%;
 }
 50% {
  width: 60%;
 }
 100% {
  left: 0%;
  width: 40%;
 }
}

.sign-in-checkbox:not(:indeterminate):not(:checked) + .box .square {
  --animation-name: login;
}

.sign-in-checkbox:not(:indeterminate):checked + .box .square {
 --animation-name: logout forwards;
}

.window {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #c73030;
  z-index: 9999;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  background-color: #f7986c;
  z-index: -999;
}

.square {
  animation: var(--animation-name) 600ms reverse ease-in-out;
  position: absolute;
  right: auto;
  top: 0;
  width: 40%;
  height: 100%;
  background-color: cornflowerblue;
}


.btn {
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 font-family: sans-serif;
  position: absolute;
  width: 200px;
  height: 70px;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #444;
}

.visually-hidden { /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

<input type="checkbox" id="sign-in-state" class="visually-hidden sign-in-checkbox">  
<div class="box">

   <div class="square">
    <label class="btn" for="sign-in-state">
     
     <div class="sI">Sign In</div>
    </label>
   </div>

  </div>

如何使用 JS 为左侧的宽度大小设置动画？

How to animate Width size from left side with JS?

javascript

anime.js