javascript - 我可以从哪个动画中选择一个特定的百分比来继续吗？

Question

我有一个高度为 500vh 的 div 和一个每 5 秒显示一次 div 的每 100vh 的动画

@keyframes slide {
    0%{
        top: 0;
    }
    3.33% {
        top: -100vh;
    }
    19.99%{
        top: -100vh;
    }
    23.32% {
        top: -200vh;
    }
    39.98% {
        top: -200vh;
    }
    43.31% {
        top: -300vh;
    }
    59.97%{
        top: -300vh;
    }
    63.3% {
        top: -400vh;
    }
    79.96%{
        top: -400vh;
    }
    83.29%{
        top: 0vh;
    }
    100% {
        top: 0vh;
    }
}

我已经设置了一些单选按钮来在这些帧之间导航我想我的动画从我分配给单选按钮的百分比开始，我的意思是当我点击一个单选按钮时我的动画从特定百分比的动画开始。我该怎么做

Answer 1

你应该使用过渡而不是动画。

_scrollTo = function (percentage) {
  document.getElementById('myDiv').style.transform = `translateY(${-percentage}%)` // percentage is negative so it scrolls DOWN instead of UP
}

body {
    margin: 0;
    padding: 0;
}

div {
    position: fixed;
    z-index: -1;
    overflow: hidden;
    height: 500vh;
    width: 100vw;
    font-size: 100px;
    border: 10px solid red;
    box-sizing: border-box;
    background: linear-gradient(0deg, rgba(18,12,128,1) 0%, rgba(0,212,255,1) 100%);
    transition: transform 1s ease;
}

<button onclick="_scrollTo(0)">Scroll to 0%</button>
<button onclick="_scrollTo(20)">Scroll to 20%</button>
<button onclick="_scrollTo(40)">Scroll to 40%</button>
<button onclick="_scrollTo(60)">Scroll to 60%</button>
<button onclick="_scrollTo(80)">Scroll to 80%</button>
<button onclick="_scrollTo(100)">Scroll to 100%</button>
<div id="myDiv">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus est euismod tellus cursus, id pharetra est laoreet. Aliquam in neque hendrerit, facilisis ante ut, laoreet lacus. Aenean et massa a risus facilisis bibendum. Donec viverra varius libero, non varius massa luctus quis. Pellentesque quis faucibus neque. Etiam dui ipsum, malesuada id ante in, ornare placerat mauris. Fusce porta ex eu turpis ornare, ac ultrices purus dapibus. Nullam sem turpis, dictum sit amet nibh ut, scelerisque congue est. Nunc porta lorem arcu, viverra dapibus eros dapibus sit amet. Quisque id gravida sapien, quis feugiat massa. Fusce quis pharetra magna, quis vehicula tellus. Maecenas dictum tellus eu ultrices congue.

  Aenean vel mi sed sapien scelerisque fringilla. Aliquam sit amet suscipit ex. Vivamus vel ligula sollicitudin, rhoncus justo eu, pellentesque erat. Vestibulum commodo nunc risus, gravida dictum purus molestie non. Donec semper neque nulla, ullamcorper hendrerit ipsum auctor sed. Donec in nisl tincidunt, porttitor augue sed, condimentum nisi. Vestibulum euismod feugiat gravida. Maecenas hendrerit, erat vel consectetur scelerisque, felis odio venenatis velit, in ultricies erat augue non erat. Aliquam erat volutpat. Pellentesque eget ante quam.

  Proin eleifend vulputate finibus. Cras ut mauris a ante pretium tristique. Praesent ipsum nunc, rhoncus in sem sed, mattis lacinia sem. Fusce congue magna volutpat, fringilla lectus quis, tempus ex. Pellentesque at volutpat orci, et efficitur nulla. Integer eget mi quis lectus pellentesque faucibus. Maecenas odio ante, laoreet ac laoreet dapibus, congue in massa. Quisque suscipit libero est, nec condimentum sem tincidunt non. Nunc consequat, sapien ac efficitur euismod, augue ex efficitur lectus, ac volutpat risus quam at mauris. Praesent id euismod libero. Donec at orci metus. Suspendisse eget orci nisi. Pellentesque sed est imperdiet, efficitur arcu varius, tempor leo.

  Ut sed diam libero. Vivamus condimentum varius risus, et aliquam velit varius eu. Nunc efficitur urna ipsum. Vivamus nec tortor ac ante venenatis lacinia. Ut eu faucibus risus. Suspendisse tempus consectetur ipsum, vel faucibus tellus gravida ut. Vivamus mollis purus quis libero accumsan, in volutpat lectus tempus.

  Proin id dui a massa fermentum varius sit amet eleifend libero. Duis fringilla vitae augue a auctor. Mauris non urna in mi fermentum convallis non non quam. Etiam quis libero neque. Vestibulum eget scelerisque dui. Nunc semper, augue eu lacinia euismod, eros leo consequat purus, quis dignissim neque leo at ante. Nullam varius vel ligula nec feugiat. Morbi vitae rhoncus augue. Donec semper purus vitae lorem finibus, nec tincidunt ex faucibus. Vivamus vestibulum, turpis at dictum vehicula, dui velit porta magna, at auctor felis arcu eu turpis. Nunc odio lorem, feugiat vel feugiat hendrerit, rutrum ut est.
</div>