首页 / 技术问答 / Javascript问答列表 / 问答详情

Javascript JS Animate()方法未按预期工作

我正在为我的项目制作一个动画车轮，它应该是这样工作的: 用户点击Next按钮，滚轮旋转90度，就会出现一个项目，我必须说，这4个项目中的每一个都被放置在轮子上，没有js代码应用到它们上，代码的工作就是在用户点击的方向上转动轮子.代码在一个方向上运行得很好，但是当你点击相反的方向时，会有一个跳转，而第二次点击相同的方向，动画就会像预期的那样播放.

Html:

<body>
<div class="drinks-wheel-section">
    <div class="drinks-wheel">
        <div class="drinks-wrapper wrapper1">
            <div class="drink-picture --1"></div>
            <div class="drink-picture --2"></div>
        </div>
        <div class="drinks-wrapper wrapper2">
            <div class="drink-picture --3"></div>
            <div class="drink-picture --4"></div>
        </div>
    </div>
    <div class="name-and-change">
        <span class="previous">< </span>
        <p class="drink-name"></p>
        <span class="next">></span>
    </div>
</div>
    <script src="s.js"></script>
</body>

Css:以下内容:


.drinks-wheel-section{
    width: 100%;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4rem;
    position: relative;
}

.drinks-wheel{
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    position: relative;
}

.drink-picture{
    width: 7rem;
    height: 7rem;
}
.--1{
    background-color: aqua;
}

.--2{
    background-color: darkblue;
}

.--3{
    background-color: black;
}

.--4{
    background-color: brown;
}

.drinks-wrapper{
    width: 100%;
    height: 7rem;
    position: absolute;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}


.wrapper1{
    top: 37%;
    left: 0%;
}

.wrapper2{
    rotate: 90deg;
    top: 38%;
    left: 0%;
}

.name-and-change{
    width: 15%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: absolute;
}

.next,.previous{
    font-size: 2rem;
    cursor: pointer;
}

JS:

const $ = document
const previousBtn = $.querySelector(".previous")
const nextBtn = $.querySelector(".next")
const CurrentDrinkName = $.querySelector(".drink-name")
const drinksWheel = $.querySelector(".drinks-wheel")

let rotateAmountFrom = 0
let rotateAmountTo = 0

function showNextOrPreviousDrink (e){
    if(e.target.classList.contains("previous")) {
        rotateAmountFrom = rotateAmountTo
        rotateAmountTo = rotateAmountTo + 90
        let animationRotate = [
            {rotate: rotateAmountFrom + "deg"},
            {rotate: rotateAmountTo + "deg"},
        ]
        drinksWheel.animate(animationRotate,{fill: "forwards",duration:800,})
    
    } else {
        rotateAmountFrom = rotateAmountTo
        rotateAmountTo = rotateAmountTo + 90    
        let animationRotate = [
            {rotate: "-" + rotateAmountFrom + "deg"},
            {rotate: "-" + rotateAmountTo + "deg"},
        ]
        drinksWheel.animate(animationRotate,{fill: "forwards",duration:800,})

    }
    console.log(rotateAmountFrom,rotateAmountTo,)
}
nextBtn.addEventListener("click",showNextOrPreviousDrink)
previousBtn.addEventListener("click",showNextOrPreviousDrink)

推荐答案

在CSS transition: rotate 0.8s;和JavaScript中，我只使用deg变量来计算变化程度，并使用elWheel.style.rotate = `${deg}deg`;

示例:

const el = (sel, par = document) => par.querySelector(sel);

const elPrev = el(".prev");
const elNext = el(".next");
const elWheel = el(".drinks-wheel");

let deg = 0

const rotate = (degChange) => {
  deg += degChange
  elWheel.style.rotate = `${deg}deg`;
};

elNext.addEventListener("click", () => rotate(90));
elPrev.addEventListener("click", () => rotate(-90));
.drinks-wheel-section{
  width: 100%;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4rem;
  position: relative;
}

.drinks-wheel{
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  position: relative;
  transition: rotate 0.8s;
}

.drink-picture{
  width: 7rem;
  height: 7rem;
  background-color: var(--bg);
}

.drinks-wrapper{
  width: 100%;
  height: 7rem;
  position: absolute;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.wrapper1{
  top: 37%;
  left: 0%;
}

.wrapper2{
  rotate: 90deg;
  top: 38%;
  left: 0%;
}

.name-and-change{
  width: 15%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: absolute;
}

.next,
.prev {
  font-size: 2rem;
  cursor: pointer;
}
<div class="drinks-wheel-section">
  <div class="drinks-wheel">
    <div class="drinks-wrapper wrapper1">
      <div class="drink-picture" style="--bg:aqua;"></div>
      <div class="drink-picture" style="--bg:darkblue;"></div>
    </div>
    <div class="drinks-wrapper wrapper2">
      <div class="drink-picture" style="--bg:black;"></div>
      <div class="drink-picture" style="--bg:brown;"></div>
    </div>
  </div>
  <div class="name-and-change">
    <button type="button" class="prev">&lt;</button>
    <p class="drink-name"></p>
    <button type="button" class="next">&gt;</button>
  </div>
</div>

然后，为了检索旋转索引(假设轮子中有4个项目)，您可以使用:

const mod = (n, m) => ((n % m) + m) % m; // Fix negative Modulo

  // and inside the click function....
  const degAbs = mod(deg, 360);
  const index = degAbs / 360 * 4;
  console.log(index);      // 0, 1, 2, 3

Javascript相关问答推荐

如何使用JavaScript用等效的功能性HTML替换标记URL格式？

使用续集和下拉栏显示模型属性

MongoDB中的引用

react—router v6：路由没有路径

简单的PayPal按钮集成导致404错误

为什么我的导航条打开状态没有在窗口addeventlistener(Reaction Js)中更新？

使用Promise.All并发解决时，每个promise 的线性时间增加？

我创建了一个创建对象的函数，我希望从该函数创建的对象具有唯一的键.我怎么能做到这一点？

使用getBorbingClientRect()更改绝对元素位置

JavaScript不重定向配置的PATH

try 使用PM2在AWS ubuntu服务器上运行 node 进程时出错

如何为仅有数据可用的点显示X轴标签？

在查看网页时，如何使HTML中的按钮工作方式类似于鼠标上的滚轮或箭头键？

为列表中的项目设置动画

Node.js错误： node 不可单击或不是元素

我的NavLink活动类在REACT-ROUTER-V6中出现问题

在Puppeteer中使用promise进行日志(log)记录时出现TargetCloseError

我如何才能让p5.js在不使用实例模式的情况下工作？

如何在不将整个文件加载到内存的情况下，在Node.js中实现Unix粘贴命令？

此上下文在JavaScript中

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630