如何通过添加具有转换的类来重放动画？

Question

每次选择新项目时，如何让以下脚本触发“打开”动画？

origin/master

$('#things div').on('click',function() {
  var val = $(this).html();
  $('#panel').removeClass('open').addClass('open');
  $('#content').html(val);
});

$('#panel').on('click',function() {
  $(this).removeClass('open');
});

#panel {
  position: absolute;
  transition: .25s;
  width: 100px;
  height: 50px;
  left: 50%;
  margin-left: -50px;
  top: -51px;
  border: 1px solid blue;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
#content {
  font-size: 30px;
}
#panel.open {
  top: 0;
}

#things div {
  display: block;
  padding: 5px;
  cursor: pointer;
  border: 1px solid green;
  width: 30px;
  height: 30px;
}

Answer 1

你应该使用延迟，这样删除和添加类就可以了。

$('#things div').on('click',function() {
  var delay = 500;
  var val = $(this).html();
  
  // for init
  if ( !$('#panel').hasClass('open') ) {
    delay = 0;
  }
    
  $('#panel').removeClass('open');
  
  setTimeout(function() {
    $('#content').html(val);
    $('#panel').addClass('open');
  }, delay);
  
});

$('#panel').on('click',function() {
  $(this).removeClass('open');
});

#panel {
  position: absolute;
  transition: .25s;
  width: 100px;
  height: 50px;
  left: 50%;
  margin-left: -50px;
  top: -51px;
  border: 1px solid blue;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
#content {
  font-size: 30px;
}
#panel.open {
  top: 0;
}

#things div {
  display: block;
  padding: 5px;
  cursor: pointer;
  border: 1px solid green;
  width: 30px;
  height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel"><div id="content"></div><div>(click to close)</div></div>

<div id="things">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Answer 2

如果在再次调用之前添加延迟，则可以正常工作。

这里我还检查它是否有类，所以只有在超时时才会运行。

$('#things div').on('click',function() {
  var val = $(this).html();
  if ($("#panel").hasClass("open")) {
    $('#panel').removeClass('open');
    setTimeout(function() {
      $('#panel').addClass('open');
    }, 250)
    $('#content').html(val);
    return;
  }
  $('#panel').addClass('open');
  $('#content').html(val);
});

$('#panel').on('click',function() {
  $(this).removeClass('open');
});

#panel {
  position: absolute;
  transition: .25s;
  width: 100px;
  height: 50px;
  left: 50%;
  margin-left: -50px;
  top: -51px;
  border: 1px solid blue;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
#content {
  font-size: 30px;
}
#panel.open {
  top: 0;
}

#things div {
  display: block;
  padding: 5px;
  cursor: pointer;
  border: 1px solid green;
  width: 30px;
  height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel"><div id="content"></div><div>(click to close)</div></div>

<div id="things">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Answer 3

您需要添加延迟以便动画可以运行。

在这里，我添加了0.25秒的延迟，这是你的动画有多长。

删除班级

setTimeout(function(){$('#panel').addClass('open')}, 250);

然后等待250毫秒并再次添加

$('#things div').on('click',function() {
  var val = $(this).html();
  $('#panel').removeClass('open');
  setTimeout(function(){$('#panel').addClass('open')}, 250);
  $('#content').html(val);
});

$('#panel').on('click',function() {
  $(this).removeClass('open');
});

段：

＆＃13;

＆＃13;

#panel {
  position: absolute;
  width: 100px;
  height: 50px;
  left: 50%;
  margin-left: -50px;
  top: -51px;
  border: 1px solid blue;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
#content {
  font-size: 30px;
}
#panel.open {
  top: 0;
  transition: .25s ease-in;
}

#things div {
  display: block;
  padding: 5px;
  cursor: pointer;
  border: 1px solid green;
  width: 30px;
  height: 30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel"><div id="content"></div><div>(click to close)</div></div>

<div id="things">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;