首页 \ 问答 \ 如何使用JavaScript暂停和恢复CSS3动画？(How to pause and resume CSS3 animation using JavaScript?)

如何使用JavaScript暂停和恢复CSS3动画？(How to pause and resume CSS3 animation using JavaScript?)

 我试图google和从这个论坛看一个解决我的问题，但没有运气到目前为止。 我想通过点击图片暂停我的CSS3动画（图像幻灯片），并通过点击图片恢复到相同的动画。  
 我知道如何暂停幻灯片放映，我也可以恢复一次，但如果尝试暂停和恢复一次以上，它将停止工作。 这是我的代码如何：  
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.pic {
    position: absolute;
    opacity: 0;
}
#pic1 {
    -webkit-animation: pic1 4s infinite linear;
}
#pic2 {
    -webkit-animation: pic2 4s infinite linear;
}
@-webkit-keyframes pic1 {
    0%   {opacity: 0;}
    5%   {opacity: 1;}
    45%  {opacity: 1;}
    50%  {opacity: 0;}
    100% {opacity: 0;}
}
@-webkit-keyframes pic2 {
    0%   {opacity: 0;}
    50%  {opacity: 0;}
    55%  {opacity: 1;}
    95%  {opacity: 1;}
    100% {opacity: 0;}
}
</style>
<script type="text/javascript">
function doStuff(){
    var pic1 = document.getElementById("pic1");
    var pic2 = document.getElementById("pic2");

    pic1.style.webkitAnimationPlayState="paused";
    pic2.style.webkitAnimationPlayState="paused";

    pic1.onclick = function(){
        pic1.style.webkitAnimationPlayState="running";
        pic2.style.webkitAnimationPlayState="running";
    }

    pic2.onclick = function(){
        pic1.style.webkitAnimationPlayState="running";
        pic2.style.webkitAnimationPlayState="running";
    }
}
</script>
</head>  
<body>
    <img id="pic1" class="pic" src="photo1.jpg" />
    <img id="pic2" class="pic" src="photo2.jpg" onclick="doStuff()" />
</body>                                                                 
</html>
 
 我不想使用任何JS库（例如jQuery）或任何其他外部解决方案。  
 我的猜测是，我的doStuff函数中的函数仍在运行，这就是为什么pause和resume工作只有一次。  
 点击这些功能后，是否有办法清除这些功能？ 或者我试图以完全错误的方式做到这一点？ 帮助是赞赏 :) 

I've tried to google and look from this forum a solution for my problem but no luck so far. I would like to pause my CSS3 animation (image slide show) by clicking a picture and also resume to the same animation by clicking a picture.  
I know how to pause the slide show and I was also able to resume it once, but then it stops working if try to pause and resume more than one time. Here is how my code looks like: 
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.pic {
    position: absolute;
    opacity: 0;
}
#pic1 {
    -webkit-animation: pic1 4s infinite linear;
}
#pic2 {
    -webkit-animation: pic2 4s infinite linear;
}
@-webkit-keyframes pic1 {
    0%   {opacity: 0;}
    5%   {opacity: 1;}
    45%  {opacity: 1;}
    50%  {opacity: 0;}
    100% {opacity: 0;}
}
@-webkit-keyframes pic2 {
    0%   {opacity: 0;}
    50%  {opacity: 0;}
    55%  {opacity: 1;}
    95%  {opacity: 1;}
    100% {opacity: 0;}
}
</style>
<script type="text/javascript">
function doStuff(){
    var pic1 = document.getElementById("pic1");
    var pic2 = document.getElementById("pic2");

    pic1.style.webkitAnimationPlayState="paused";
    pic2.style.webkitAnimationPlayState="paused";

    pic1.onclick = function(){
        pic1.style.webkitAnimationPlayState="running";
        pic2.style.webkitAnimationPlayState="running";
    }

    pic2.onclick = function(){
        pic1.style.webkitAnimationPlayState="running";
        pic2.style.webkitAnimationPlayState="running";
    }
}
</script>
</head>  
<body>
    <img id="pic1" class="pic" src="photo1.jpg" />
    <img id="pic2" class="pic" src="photo2.jpg" onclick="doStuff()" />
</body>                                                                 
</html>
 
I don't want to use any JS libraries (e.g. jQuery) or any other external solution.  
My guess is that my functions inside doStuff function are still running and that's why pause and resume works only once.  
Is there a way to clear these functions after I have clicked them once? Or am I trying to do this in a totally wrong way? Help is appreciated. :)

原文：https://stackoverflow.com/questions/5804444

更新时间：2023-03-26 20:03

最满意答案

 对此还有一个更清洁的解决方案  
 has_many :line_items, :dependent => :restrict # raises ActiveRecord::DeleteRestrictionError  
 这将引发您可以捕获的错误。  
 在任何情况下，您都需要指定dependent选项以避免在数据库中留下孤儿。 开发人员有责任记住这些事情并在Rails中设置适当的条件。  
 has_many :line_items, :dependent => :delete # Will remove all child records  
 我从未使用任何额外的宝石来处理外键。 

There is also a cleaner solution for this  
has_many :line_items, :dependent => :restrict # raises ActiveRecord::DeleteRestrictionError 
This will raise an error that you can catch.  
In any case, you need to specify the dependent option to avoid having orphans left in your database. It is the developers responsibility to remember these things and set the proper conditions in Rails. 
has_many :line_items, :dependent => :delete # Will remove all child records 
I never used any additional gems to deal with Foreign keys.

如何使用JavaScript暂停和恢复CSS3动画？(How to pause and resume CSS3 animation using JavaScript?)

最满意答案

相关问答

通过数据库级外键维护数据库完整性(Maintaining database integrity through database level Foreign Keys)[2023-06-19]

如果我们手动保证数据库完整性，我应该删除外键吗？(Should I remove the foreign keys if we manually guarantee database integrity?)[2022-09-01]

三级数据库 - 外键(Three level database - foreign keys)[2024-02-25]

数据库设计和参照完整性(Database design & referential integrity)[2022-03-08]

卡车数据库中的密钥和完整性(Keys and integrity in truck database)[2023-10-21]

使用Eloquent ORM时，是否需要在数据库级别维护外键？(Do I need to maintain foreign keys at the database level when using Eloquent ORM?)[2023-09-13]

如何使Ruby on Rails创建启用了外键的SQLite数据库？(How to make Ruby on Rails create SQLite database with foreign keys enabled?)[2023-11-15]

为什么有必要在数据库中显式指定外键和引用？(Why is it necessary to explicitly specify foreign keys and references in databases?)[2021-09-06]

数据库设计：多路径完整性约束(Database design: multi-path integrity constraints)[2023-07-01]

数据库使用外键(database using foreign keys)[2023-03-30]

相关文章

最新问答