javascript - 让 Div 在展开前向左移动

Question

我有这个 div，我想向左移动，就像动画一样平滑，然后我希望它扩展到动画的大小。我目前尝试的方法是使用类并通过单击 在它们之间切换，它们的过渡属性允许它进行动画处理。

基本上我正在努力让元素移动，然后展开，它想要同时执行它们，或者在重新单击时展开然后移动。

I want to Click > move > then expand > then re-click to undo it all. Preferably all in JQuery

HTML:

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

CSS:

.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;
}

这是我的 jsfiddle

谢谢!

Answer 1

不需要写太多的 JS 代码，我们只需要用 CSS3 做一些技巧。 永远记住，在任何属性上使用过渡时，您应该必须定义初始值和最终值。 fiddle 是 https://jsfiddle.net/dps6dwdv/1/

这是更新后的代码。

HTML

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

CSS

.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;
}

JS

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

});