Составное значение в объекте, используемом для постепенного перемещения точки по странице - PullRequest
Новая
       37

Составное значение в объекте, используемом для постепенного перемещения точки по странице

0 голосов
/ 30 сентября 2019

Я не могу заставить переменную функционировать как значение translateX в моем объекте. Я хочу, чтобы точка прокручивалась по странице при каждом нажатии следующей кнопки. Мой код может только перемещать его вперед и назад для первого шага.

Я новичок в API анимации, и я уже сделал эту работу с переходами CSS, но я пытаюсь получить хороший контроль надAPI.

html: 

<div class="progress__container">

                <div class="progress__bar">
                        <div id="progress__fill" class="step1"></div>
                        <div class="circ" id="circ__1"></div>
                        <div class="circ" id="circ__2"></div>
                        <div class="circ" id="circ__3"></div>
                        <div class="circ" id="circ__4"></div>



                        <div id="progress__dot" class="prog__1"></div>
                    </div>
            <div class="backBar"></div>
            <div class="flexrow">
                    <span class="stepName">Account</span>
                    <span class="stepName">Frequency</span>
                    <span class="stepName">Amount</span>
                    <span class="stepName">Taxes</span>
                </div>
            <div class="button__container">
                <button class="buttonStep" id="back">Back</button>
                <button class="buttonStep is-active" id="next">Next</button>
            </div>
    </div>

js: 

// give a starting value for the transformation
var startVal = 0;

// define the keyframes
var moveDot = [
    { transform: `translateX(${startVal}px)`},
    { transform: `translateX(${startVal + 190}px)`}
  ];

// definte the timing
var dotTiming = {
    duration: 400,
      fill: "forwards",
      easing: 'ease-in',
} 

// make the animation happen
var movingDot = document.getElementById("progress__dot").animate(
    moveDot,
    dotTiming
  );
//  pause the animation until called
movingDot.pause();





    // on click fire the animation
document.getElementById('next').addEventListener('click', function() {
    movingDot.playbackRate = 1;

    if (startVal <= 380) {
        movingDot.play();
        startVal += 190;
    } 



});


document.getElementById('back').addEventListener('click', function() {
    movingDot.playbackRate = -1;
    if (startVal >= 0) {
        movingDot.play();
        startVal -= 190;
    } 

});

css: 

#progress__fill {
    height:2px;
    position: absolute;
    top: 7px;
    left: 0;
    background-color: darkred;
}
#progress__dot {
    background-color: darkred;
    color: #fff;
    border-radius: 50%;
    height: 8px;
    width: 8px;
    position: absolute;
    text-align:center;
    line-height: 8px;
    padding: 6px;
    top: 0;
    font-size: 12px;


}





/* Static Bar Elements */
.progress__container {
 width: 600px;
 margin: 20px auto;
 position: relative;

}
.backBar {
    height:2px;
    width:96%;
    position: absolute;
    top: 7px;
    left: 2%;
    background-color: lightgrey;
}
.progress__bar {
    z-index: 100;
    position: relative;
    width: 96%;
    margin: 0 auto;
}
.circ {
    background-color: #fff;
    border: 2px solid lightgrey;
    border-radius: 50%;
    height: 12px;
    width: 12px;
    display: inline-block;

}
#circ__2, #circ__3 {
    margin-left: 30%
}
#circ__4 {
    float: right;
}
.passed {
    background-color: darkred;
    border: 2px solid darkred;
}
.hide {
    visibility: hidden
}
.flexrow {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


/* Buttons */
.buttonStep {
    background: grey;
    color: #fff;
    padding: 10px 25px;
    border-radius: 10px;
    font-size: 16px;
}
#back {
    float: left;
}
#next {
    float: right;
}
.is-active {
    background: darkred;
}

То, как я его настроил, я ожидаю длязначения translateX увеличиваются или уменьшаются в зависимости от прослушивателей событий щелчка, которые заставят круг скользить по странице. На самом деле происходит то, что работает только первый шаг. он не пройдет мимо первой точки остановки. Если я запишу moveDot в консоли, он выдаст ожидаемые значения, но он будет запускаться / останавливаться только при 0 и 190. Кнопка возврата работает точно так же. ссылка на скрипку

1 Ответ

1 голос
/ 30 сентября 2019

Он анимирован из одного и того же места каждый раз. Переместите определение moveDot в прослушиватель событий: 

// give a starting value for the transformation
var startVal = 0;

// definte the timing
var dotTiming = {
  duration: 400,
  fill: "forwards",
  easing: 'ease-in',
}

// on click fire the animation
document.getElementById('next').addEventListener('click', function() {
  if (startVal > 380){return;}

  // define the keyframes
  var moveDot = [{transform: `translateX(${startVal}px)`},
    {transform: `translateX(${startVal + 190}px)`}];

  // make the animation happen
  var movingDot = document.getElementById("progress__dot").animate(
    moveDot,
    dotTiming
  );

  movingDot.playbackRate = 1;


  movingDot.play();
  startVal += 190;



});


document.getElementById('back').addEventListener('click', function() {
  movingDot.playbackRate = -1;
  if (startVal >= 0) {
    movingDot.play();
    startVal -= 190;
  }

});
...