Javascript 使Div在展开前向左移动

我有一个

div

，我想向左移动，就像用动画平滑地移动一样，然后我想用动画将它扩展到一个大小。我目前尝试的方法是使用类并通过单击在它们之间切换，它们上的transition属性允许它设置动画

基本上，我正在努力让元素移动，然后展开，它想要么同时执行这些操作，要么在重新单击它移动时展开

我想单击>移动>然后展开>然后重新单击以撤消所有操作。 最好使用JQuery中的所有语言

HTML:

这是我的

---

谢谢

只需一个动画，就可以在CSS中完成这一切

document.getElementById（'button'）.addEventListener（'click'，function（）{
document.getElementById（'box2'）.classList.toggle（'animate'）；
})

.box{
背景色：rgba（0,0,0,0.8）；
位置：相对位置；
高度：200px；
宽度：300px；
}
输入{
显示：无；
}
标签{
光标：指针；
文字装饰：下划线；
颜色：#09c；
}
：选中~#框2，.设置动画{
动画：富5向前；
}
@关键帧foo{
50% {
转换：translateX（100px）；
高度：200px；
宽度：300px；
}
100% {
高度：500px；
宽度：500px；
}
}

复选框javascript
盒子

类似这样的东西

var bind=true
$（'#box2'）。单击（函数（）{
$（'#box2'）。toggleClass（“单击框”）；
});
$（'#box2'）。单击（函数（）{
如果（绑定）{
$（'#box2'）.addClass（“向左移动”）；
}
else$（'#box2'）.removeClass（“向左移动”）；
绑定=！绑定；
});
.box\u单击{
高度：500px；
宽度：500px；
背景色：rgba（0,0,0,0.8）；
过渡：所有1；
-webkit转换：所有1；
-moz转换：所有1；
-o-过渡：所有1s；
}
.盒子{
高度：200px；
宽度：300px；
背景色：rgba（0,0,0,0.8）；
位置：相对位置；
左：0px；
过渡：所有1；
-webkit转换：所有1；
-moz转换：所有1；
-o-过渡：所有1s；
}
.向左走{
位置：相对位置；
左：100px；
背景色：红色；
}

盒子
无需编写大部分JS代码，只需对CSS3进行一些技巧。
请始终记住，在对任何属性使用转换时，都必须定义初始值和最终值。
这是小提琴

这是更新后的代码

HTML

JS

可以使用关键帧动画实现这一点


var-box=document.getElementById（'box2'）；
box.addEventListener（'单击'，函数（））{
box.classList.toggle（'box_clicked'）；
});
@关键帧已激活{
50% {
转换：translateX（100px）；
}
100% {
高度：500px；
宽度：500px；
转换：translateX（100px）；
}
}
.盒子{
高度：200px；
宽度：300px；
右：0；
背景色：rgba（0,0,0,0.8）；
位置：相对位置；
}
.box_单击{
动画名称：boxActivated；
动画持续时间：4s；
动画填充模式：正向；
}

盒子
您是否期待这样的事情？使用
JQuery


var bind=true
$（'#box2'）。单击（函数（）{
$（'#box2'）.css({
“右”：“0px”，
“左”：“0px”
}).制作动画({
“右”：“150px”
}，function（）{$（this）.addClass（“单击框”）.css（{'height'：'100px'}）；
});
$（'#box2'）。单击（函数（）{
如果（绑定）{
$（'#box2'）.css({
“右”：“0px”，
“左”：“0px”
}).制作动画({
“左”：“150px”
}，0，function（）{$（this）.addClass（“向左移动”）.css（{'height'：'200px'}）；
}
绑定=！绑定；
});
.box\u单击{
高度：100px；
宽度：200px；
背景色：rgba（0,0,0,0.8）；
过渡：所有1；
-webkit转换：所有1；
-moz转换：所有1；
-o-过渡：所有1s；
}
.盒子{
高度：100px；
宽度：200px；
背景色：rgba（0,0,0,0.8）；
位置：相对位置；
过渡：所有1；
-webkit转换：所有1；
-moz转换：所有1；
-o-过渡：所有1s；
}
.向左走{
右：-100px；
背景色：红色；
}

盒子
这没有事件侦听器，需要单击based@Jiroscopes编辑了我的答案并添加了一些方法来触发动画。checkbox方法都是CSS，而另一个方法使用javascript。这会起作用，我怎样才能使它在再次单击时恢复到原始状态？这很完美，简化了很多事情。谢谢你教我新东西！无需在
toggleClass（）
中添加持续时间。这是不必要的，因为它不包含持续时间参数。它可以为我同时调整大小和移动。但是你说得很好，如果你设置了一个延迟，你只需要转换就可以了<代码>过渡：左1s，宽1s
<div class="box" id="box2">
  <h1 class="headline">BOX</h1>
</div>

.box_clicked {
    height: 500px;
    width: 500px;
    background-color: rgba(0, 0 , 0, 0.8);
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
   -o-transition: all 1s;
}
.box {
    height: 200px;
    width: 300px;
    background-color: rgba(0, 0 , 0, 0.8);
    position: relative;
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
}

.move-left {
    right: -100px;
    background-color:red;
}

<div class="box" id="box2">
  <h1 class="headline">BOX</h1>
</div>

.box {
    height: 200px;
    width: 300px;
    background-color: rgba(0, 0 , 0, 0.8);
    position: relative;
  left: 0px;
    transition: left 1s,width 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;

}
.box.active{
  left : 20px;
  width : 500px;
}

$('#box2').click(function(){
    $('#box2').toggleClass("active");

});