在切换类上使用纯CSS动画不起作用[重复]

问题描述 投票:0回答:2

我正在使用一个简单的 CSS 动画,通过单击按钮我可以切换类并播放反向动画。 不幸的是,动画在加载页面上正确播放,但是当我单击按钮时,动画不运行,它给我最后一个关键帧,没有任何动画和延迟。

<div>
  <button>click</button>
  <span ></span>
</div>

span{display:block;width:100px;height:100px;}

@keyframes a{
from { background:red;}
to {background:lime;}
}


.opened{
  animation:a 1s;
  animation-direction:reverse;
  animation-fill-mode:forwards;
  animation-delay:3s;
}
span{
  animation:a 1s;
  animation-fill-mode:forwards;
  animation-delay:3s;
}

$("button").click(function(){
  $("span").toggleClass("opened");
});

这是我的代码笔示例代码笔

jquery css animation css-animations delay
2个回答
0
投票

添加jquery cdn并将jquery代码放入$(document).ready();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("span").toggleClass("opened");
            });
        });
       
    </script>

如果上面是正确的,那么你可以修改CSS类,如下所示:

.opened {
          animation:unset;
          /*animation: a 1s;
          animation-direction: reverse;
          animation-fill-mode: forwards;
          animation-delay: 3s;*/
      }

0
投票

我尝试更好地解释我想要实现的目标。 我有一个可折叠菜单,当关闭时它必须是位置:静态的,当打开时必须是位置:固定的,通过关闭它它将返回到静态位置,但在延迟时间之后让一些动画在关闭之前播放。

我用我的代码笔

实现了这一点
div{width:100px;height:100px;}

@keyframes a{
from { background:red;position:fixed;}
to {background:lime;position:static;}
}

.opened{
  animation:unset;
  position:fixed;
  background:red;
  border-right:5px solid green;
}
div{
  background:red;
  position:fixed;
  animation:a 1s;
    animation-delay:3s;
    animation-fill-mode:forwards;
}

但我不知道为什么在我的网站上背景样式效果很好但它保持固定位置: https://www.jcprod.it/

© www.soinside.com 2019 - 2024. All rights reserved.