js animate() 方法未按预期工作

问题描述 投票：0回答：1

我正在为我的项目制作一个动画轮，它应该像这样工作： 用户单击下一个按钮，并带有动画，轮子转动 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)
javascript css animation
1个回答
0
投票

我只会在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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.