如何重播通过添加带有过渡的类触发的动画？

Question

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

 $('#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; } 

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

您应该使用延迟，以便可以使用remove和add类。

 $('#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

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

在这里，我添加了.25s的延迟，即动画的持续时间。

所以删除课程

$('#panel').removeClass('open');

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

setTimeout(function(){$('#panel').addClass('open')}, 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'); }); 

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

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