javascript - 多个关键帧但似乎没有运行-6ren

javascript - 多个关键帧但似乎没有运行

转载作者：行者123 更新时间：2023-12-02 20:53:47

24

4

我正在做 Vanilla JS 和 CSS 练习，我试图在不同元素上运行 CSS 中的 2 个关键帧，但它似乎不起作用，我不知道为什么。

基本上，当单击按钮时，类 'applejuice;和 'pearjuice' 应该分别添加到 div 中，然后带有 A 的 div 将向左滑动，带有 B 的 div 将向右滑动。但是，到目前为止，只有 A 的 div 有效，B div 无效。

有人可以帮我解决这个问题吗？预先感谢您!!

**HTML:**
<body>
  <button onClick="opena()">press</button>
  <div class="pack">
    <div class="left" class="apple">A</div>
    <div class ="right"class="pear" >B</div>
  </div>
</body>

CSS:

.pack{
  width:100%;

}
body{
  margin-left:0;
  margin-right:0;
}
.left{
  background:red;
  float:left;
  width:50vw;
  margin-left:0;
  margin-right:0;

}
.right{
  background:blue;
  width:50vw;
  padding-left:0;
  margin-left:0;
  margiin-right:0;
  float:right;

}
.applejuice{
  animation-name:gorda;
  animation-duration:2.0s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
}
@keyframes gorda{
  0%{width:50vw;}
  100%{width:0vw;left: 50vw;}}
}
.pearjuice{
  animation-name:gordi;
  animation-duration:2.0s;
  animation-iteration-count:1;
  animation-fill-mode:forwards;
}
@keyframes gordi{
  0%{width:50vw;}
  100%{width:0vw;right:0vw;}
}

JS:

function opena() {
  var eleme = document.getElementsByClassName("left")[0];
  var elemo = document.getElementsByClassName("right")[0];

  eleme.classList.add("applejuice");
  elemo.classList.add("pearjuice");
}

最佳答案

你在gorda中多加了一个}

@keyframes gorda{
  0%{width:50vw;}
  100%{width:0vw;left: 50vw;}
}

function opena() {
  var eleme = document.getElementsByClassName("left")[0];
  var elemo = document.getElementsByClassName("right")[0];

  eleme.classList.add("applejuice");
  elemo.classList.add("pearjuice");
}

.pack{
  width:100%;

}
body{
  margin-left:0;
  margin-right:0;
}
.left{
  background:red;
  float:left;
  width:50vw;
  margin-left:0;
  margin-right:0;

}
.right{
  background:blue;
  width:50vw;
  padding-left:0;
  margin-left:0;
  margin-right:0;
  float:right;

}
.applejuice{
  animation-name:gorda;
  animation-duration:2.0s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
}
@keyframes gorda{
  0%{width:50vw;}
  100%{width:0vw;left: 50vw;}
}
.pearjuice{
  animation-name:gordi;
  animation-duration:2.0s;
  animation-iteration-count:1;
  animation-fill-mode:forwards;
}
@keyframes gordi{
  0%{width:50vw;}
  100%{width:0vw;right:0vw;}
}

  <button onClick="opena()">press</button>
  <div class="pack">
    <div class="left" class="apple">A</div>
    <div class ="right"class="pear" >B</div>
  </div>

关于javascript - 多个关键帧但似乎没有运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61539154/

24

4

0

文章推荐： Javascript - 查找对象数组(矩阵)中的不同属性

java - 关键帧 FFMPEG
是否有一个 FFMPEG 命令，如果我们传递一个视频文件，在每个场景更改时它都应该为它生成一个关键帧。我理解的关键帧是视频的一系列文件(图像或视频)文件，可用于在视频悬停时播放。请让我们知道我们是否可
CSS 关键帧 - 回到原点
我正在切换我通过带有 JQuery 的 toggleClass 触发的一系列动画/过渡。其中一个动画正在使用以下内容: .header { transition: all .3s ease-
带链接的 CSS 关键帧
我有一些图片可以在关键帧中很好地滚动 @-webkit-keyframes headImage /* Safari and Chrome */ { 0% {background:url(../imag
jQuery CSS 关键帧
尝试用 jQuery 制作一个简单的重复关键帧动画 $(document).ready(function() { $('body').mouseover(function() {
样式表中的 CSS3 关键帧
我在 richard bradshaw 找到了一个关于 css3 transitions 的很好的教程，可以在 http://css3.bradshawenterprises.com/cfimg/ 我
css - 关键帧 - 渐变背景不是动画
我正在尝试使用@keyframes 为背景交换设置动画。背景是径向渐变。背景发生变化，但不是动画。 #mydiv { background: radial-gradient(circle at 90%
javascript - 仅在添加类时触发 css 关键帧
如果单击按钮 2，您将看到动画运行。但是，当我使用另一个功能对按钮进行更改(选中复选框以显示。隐藏按钮)时，动画会再次运行，就像再次按下一样。如何防止每次单独的函数对按钮进行更改时触发动画？即在切换
c# - 如何将RGB图像编码成H264帧(关键帧+一些依赖帧)？
所以我创建了图像生成器(生成 RGB 的非常简单的一个)我希望能够将一定数量的图像转换为 H264 关键帧+相关帧(lats 说 100)所以在生成的每 100 帧上我需要将它们编码为 H264 .怎
html - CSS 关键帧 - 动画在内容已经静态出现后开始
我一直在尝试自学一些带有关键帧的 css 动画，我正在尝试创建一些东西，其中有一个小方 block 落下，然后从那个方 block 中，一个矩形从左边突出，然后显示一些大约 8 秒后发短信，然后 re
css - 分组 CSS3 关键帧
我意识到我不能简单地通过用逗号分隔@keyframes mymove、@-moz-keyframes mymove 等来完成下面相同的代码。。为了让它们工作，我需要如下分别声明它们。有什么方法可以将
css - 关键帧 CSS 动画覆盖悬停过渡
恐怕有类似的问题，但我没有找到具体的解决方案，所以我创建了一个 fiddle : http://jsfiddle.net/Garavani/yrnjaf69/2/ TEXT
html - 关键帧 div 上的图像映射
我有一个包含多个坐标的图像映射。但是，当我在上面放置一个关键帧 div (clouds) 时，这个不起作用，因为动画覆盖了 map 。最后一个 div 是一个动画，有一些云从图像上掠过。 html代码
用于重复闪烁效果的 CSS 关键帧(wifi)
所以我正在尝试为元素创建 Wifi 闪烁效果。首先圆圈应该是可见的，然后是上面的圆圈，依此类推。在所有符号都可见后，它应该等待 2 秒，然后重新开始。你可以在这里看到我的当前状态: http://js
javascript - 单击时运行 CSS 关键帧
我试图在单击按钮时显示一条消息。我想要“GO!”淡入/淡出表示游戏开始，但只有在单击开始按钮时才会出现。我现在正在尝试使用 jquery 和另一个来自老师的库的 javascript，它结合了鼠标点击
css - 关键帧 cssAnimation 百分比？
我正在尝试使用以下代码让对象在背景中从左向右浮动。不幸的是，当它离开屏幕时，尽管向类添加了 overflow-y: hidden 属性，但仍会出现垂直滚动条。我尝试了百分比(100% 与过渡)但它没有
css - 使用 CSS3 关键帧
我正在为将鼠标悬停在图形图像上时的弹跳效果创建关键帧。我的一切都正常工作，但是一旦动画完成..图标就会消失。我知道它与电子邮件中设置的 translateY 属性有关，并在类里面链接。在悬停时，我
javascript - 关键帧 CSS 动画
你好我正在尝试模拟翻转倒数计时器但是当我编写代码时我发现两者之间存在差异: @keyframes zindex { 0% { z-index: 2; } 5% { z-index: 4
css - 关键帧 css 中的更多内容
如果我有: @keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}} 是否可以: @keyframes anim
javascript - 切换 CSS 关键帧
我有一个弹出窗口，它在单击按钮时打开，然后在您单击另一个按钮或弹出窗口之外时关闭。我希望弹出窗口在打开时淡入并在关闭时淡出。如何使用 javascript 在两个关键帧之间切换？我尝试通过使用 ja
jquery - 如何初始化 jquery 关键帧
我正在尝试使用 jquery Keyframes用于动态创建的关键帧动画。我的页面上有六个图标(可能更多)，它们都需要设置为以下范围内的随机 x 和 y 值的动画: x = 1-5y = 13-20

首页

博学

6Ren·AI

商城

javascript - 多个关键帧但似乎没有运行