Javascript 如何使用JS从左侧设置宽度大小的动画？_Javascript_Anime.js

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

javascript

Javascript 如何使用JS从左侧设置宽度大小的动画？,javascript,anime.js,Javascript,Anime.js,我正在尝试学习如何创建类似于此动画的内容：因此，目前我遇到的问题是，当我的例子中的“绿色”或“蓝色”展开>移动>收缩时，我无法获得与使用“宽度”相同的效果，因为它从右侧收缩，我希望它在移动后从左侧收缩附上我的密码笔：使用的JS： var start = anime.timeline({ easing: 'easeInOutSine', autoplay: false }); start .add({ targets: '.square', width: 6

我正在尝试学习如何创建类似于此动画的内容：

因此，目前我遇到的问题是，当我的例子中的“绿色”或“蓝色”展开>移动>收缩时，我无法获得与使用“宽度”相同的效果，因为它从右侧收缩，我希望它在移动后从左侧收缩

附上我的密码笔：

使用的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();
  }
};

我也尝试过使用填充，但我认为AnimeJS不喜欢0 300px的值。请检查以下内容：

<!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>


.窗户{
位置：绝对位置；
宽度：100%；
身高：100%；
背景：#c73030；
z指数：9999；
}
#盒子{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：1000px；
高度：500px；
背景色：#f7986c；
z指数：-999；
}
#方格{
位置：绝对位置；
排名：0；
宽度：400px；
身高：100%；
背景颜色：矢车菊蓝；
}
#btn{
位置：绝对位置；
宽度：300px；
高度：70像素；
最高：80%；
左：50%；
转换：翻译（-50%，-50%）；
背景：#444；
}
登录
var=false；
函数animate（）{
$（'#square'）。设置动画({
宽度：'600'，
右：“0”
}，300，'摆动'；
$（'#square'）。设置动画({
宽度：“400”
}，300，'摆动'；
$（'#square'）.css（“左”，“右”）；
动画=真；
}
函数reverseeanimate（）{
$（'#square'）。设置动画({
宽度：'600'，
左：“0”
}，300，'摆动'；
$（'#square'）。设置动画({
宽度：“400”
}，300，'摆动'；
$（'#square'）.css（“右”，“右”）；
动画=假；
}
$（'#btn'）。单击（函数（）{
如果（！animated）{//如果尚未设置动画，请设置动画！
制作动画（）；
}否则{
reverseeanimate（）；
}
});

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

这是一个仅CSS版本的动画

我使用了一个视觉隐藏的复选框，按钮是一个控制复选框的

标签，CSS动画被切换到check状态
唯一的问题是，它在加载时反向执行初始动画
Edit:实际上，我对CSS做了一点小小的调整（：not（不确定）
），并在加载时添加了一段JS，将复选框设置为不确定


const checkbox=document.getElementById（'sign-in-state'）；
checkbox.undeterminate=true
@关键帧登录{
0% {
左：0；
宽度：40%；
}
50% {
宽度：60%；
}
100% {
左：60%；
宽度：40%；
}
}
@关键帧注销{
0% {
左：60%；
宽度：40%；
}
50% {
宽度：60%；
}
100% {
左：0%；
宽度：40%；
}
}
.sign-in复选框：not（：不确定）：not（：checked）+.box.square{
--动画名称：登录；
}
.登录复选框：不（：不确定）：选中+.box.square{
--动画名称：注销转发；
}
.窗户{
位置：绝对位置；
宽度：100%；
身高：100%；
背景：#c73030；
z指数：9999；
}
.盒子{
位置：绝对位置；
最高：50%；
左：50%；
溢出：隐藏；
转换：翻译（-50%，-50%）；
宽度：100vw；
高度：100vh；
背景色：#f7986c；
z指数：-999；
}
.广场{
动画：var（--动画名称）600ms反向缓进缓出；
位置：绝对位置；
右：自动；
排名：0；
宽度：40%；
身高：100%；
背景颜色：矢车菊蓝；
}
.btn{
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：白色；
字体系列：无衬线；
位置：绝对位置；
宽度：200px；
高度：70像素；
最高：80%；
左：50%；
转换：翻译（-50%，-50%）；
背景：#444；
}
.视觉隐藏{/*https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
位置：绝对！重要；
高度：1px；宽度：1px；
溢出：隐藏；
剪辑：rect（1px 1px 1px）；/*IE6，IE7*/
剪辑：rect（1px，1px，1px，1px）；
}

登录
我会调查一下，我想他们可能正在使用Flex Grow，所以我现在正在尝试不止一种给猫剥皮的方法。。。不过很酷的登录表单