Question

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

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

我想点击＆gt;移动＆gt;然后展开＆gt;然后重新单击以撤消所有操作。最好全部在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

您可以使用单个动画在CSS中完成所有操作

＆＃13;

document.getElementById('button').addEventListener('click',function() {
  document.getElementById('box2').classList.toggle('animate');
})

＆＃13;

.box {
  background-color: rgba(0, 0, 0, 0.8);
  position: relative;
  height: 200px;
  width: 300px;
}

input {
  display: none;
}

label {
  cursor: pointer;
  text-decoration: underline;
  color: #09c;
}

:checked ~ #box2, .animate {
  animation: foo 5s forwards;
}

@keyframes foo {
  50% {
    transform: translateX(100px);
    height: 200px;
    width: 300px;
  }
  100% {
    height: 500px;
    width: 500px;
  }
}

＆＃13;

<input type="checkbox" id="checkbox"><label for="checkbox">checkbox</label> <button id="button">javascript</button>
<div class="box" id="box2">
  <h1 class="headline">BOX</h1>
</div>

＆＃13;

Answer 2

像这样的东西

var bind = true
$('#box2').click(function() {
  $('#box2').toggleClass("box box_clicked");
});

$('#box2').click(function() {
  if (bind) {
    $('#box2').addClass("move-left");
  }
  else $('#box2').removeClass("move-left");
  bind = !bind;
});

.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;
  left: 0px;
  transition: all 1s;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
}
.move-left {
  position: relative;
  left: 100px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" id="box2">
  <h1 class="headline">BOX</h1>
</div>

Answer 3

没有必要写很多JS代码，只有我们必须用CSS3做一些技巧。永远记住，在任何属性上使用转换时，您必须定义初始值和最终值。小提琴是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");

});

Answer 4

您可以使用关键帧动画实现此目的。

var box = document.getElementById('box2');
box.addEventListener('click', function() {
  box.classList.toggle('box_clicked');
});

@keyframes boxActivated {
  50% {
    transform: translateX(100px);
  }
  100% {
    height: 500px;
    width: 500px;
    transform: translateX(100px);
  }
}

.box {
  height: 200px;
  width: 300px;
  right: 0;
  background-color: rgba(0, 0 , 0, 0.8);
  position: relative;
}

.box_clicked {
  animation-name: boxActivated;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

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

Answer 5

你期待这样的事吗？使用JQuery

＆＃13;

var bind = true



$('#box2').click(function() {

  $('#box2').css({
    'right': '0px',
    'left': '0px'
  }).animate({
    'right': '150px'
  }, function(){ $(this).addClass("box_clicked").css({'height':'100px'})});

  
});

$('#box2').click(function() {
  if (bind) {

    $('#box2').css({
      'right': '0px',
      'left': '0px'
    }).animate({
      'left': '150px'
    },0, function(){  $(this).addClass("move-left").css({'height':'200px'})});
  }
  bind = !bind;
});

＆＃13;

.box_clicked {
height: 100px;
width: 200px;
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: 100px;
width: 200px;
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;

 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" id="box2">
  <h1 class="headline">BOX</h1>
</div>

＆＃13;

在扩展之前让Div向左移动

5 个答案: