如何使用JS從左側為寬度大小設置動畫？

Question

我正在努力學習如何創建類似於這個動畫的東西： https ： //dribbble.com/shots/5311359-Diprella-Login

所以目前我遇到的問題是當我的情況下“綠色”或“藍色”擴展>移動>收縮時我使用“寬度”無法獲得相同的效果，因為它從右側收縮，我希望它從左側收縮它移動后的一面。

附加我的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

這是動畫的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>

Answer 2

看一下這個：

<!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（）但我沒有在我的情況下使用它。

如何使用JS從左側為寬度大小設置動畫？

問題描述

2 個解決方案

解決方案1
2 已采納 2019-03-01 16:48:05

解決方案2
1 2019-03-01 15:39:36

如何使用JS從左側為寬度大小設置動畫？

問題描述

2 個解決方案

解決方案1 2 已采納 2019-03-01 16:48:05

解決方案2 1 2019-03-01 15:39:36

解決方案1
2 已采納 2019-03-01 16:48:05

解決方案2
1 2019-03-01 15:39:36