Home>

Questions about combining html css animation @keyframes and javascript

In the following, one frame (400 * 400px) with numbers written on it slides with one click of the arrow. Please tell me how to automatically move this to the number frame selected with the select box and the execute button.

Current status >>>To move from the 0th frame (initial state) to the 4th frame, click the [Feed] button 4 times in the middle of the 1st, 2nd, and 3rd frames (1 time 1 second x 4 times = 4 seconds).

Hope >>>Place the [Pull-down] and [Execute] buttons on which the number of frames is written, select the item to move from the 0th frame (initial state) to the 4th frame by pulling down, and press the execute button 1, 2, 3 I want to use a method of moving while passing through the frame and animation (passing time 1 second x 4 frames = 4 seconds). Also, select another number to move to that number of frames.

html

<span>
 0 
 1 
 2 
 3 
 4 
 5 
 6 
 7 
</span>


<input type = "button" onclick = "move (1);" value = "send" />
<input type = "button" onclick = "move (2);" value = "return" />
CSS
div.parent {
    position: relative;
    width: 400px;
height: 400px;
    border: 1px solid #ddd;
    overflow: hidden;
}
span.child {
    position: absolute;
    width: 400px;
 height: 3200px;
    left: 0px;
top: 0px;
    animation-duration: 1s;
    animation-iteration-count: 1;
animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes moveDown {
    100% {
        transform: translateY (-400px);
    }
}
@keyframes moveUp {
 100% {
        transform: translateY (400px);
    }
}
JS
var x, y;// box coordinates
// Move 1 = Up, 2 = Down
function move (direct) {
    const objBox = document.getElementById ("box");
    const cssStyle = window.getComputedStyle (objBox);
    y = parseInt (cssStyle.top.match (/(.*)px/) [1]);
    let anim ='';
    switch (direct) {
        case 1: if (y>= -2400) {anim ='moveDown';} break;
        case 2: if (y<= -400) {anim ='moveUp';} break;
    }
    if (anim! =='') {
        objBox.style.animationName = anim;// Start animation
        btnsDisabled (true);// Button disabled
    }
}
// Processing at the end of animation
document.addEventListener ('animationend', () =>{
    const objBox = document.getElementById ("box");
    const cssStyle = window.getComputedStyle (objBox);
    const arr = cssStyle.transform.match (/ \ ((. *) \) /) [1] .split (",");// string matrix (a, b, c, d, cx, cy) Disassembly
    y + = parseInt (arr [5]);// add the value of transform.y
    objBox.style.transform ='';// Erase the animated transform
    objBox.style.top = y +'px';
    objBox.style.animationName ='';// Delete animationName. If i do not do this, the animation in the same direction will not work next time.
    btnsDisabled (false);// Button enable
});
// Enable/disable arrow buttons
function btnsDisabled (arg) {
    let btns = document.getElementsByTagName ("input");
    for (let i = 0;i<btns.length;i ++) {
        btns [i] .disabled = arg;
    }
}


We apologize for the inconvenience, and thanks for your understanding.

  • Answer # 1

    翻译不全left: 0px; top: 0px; /* animation-duration: 1s;* / animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes moveDown {100% {transform: translateY (-400px);}} @keyframes moveDown1 {100% {transform: translateY (-400px);}} @keyframes moveDown2 {100% {transform: translateY (-800px);}} @keyframes moveDown3 {100% {transform: translateY (-1200px);}} @keyframes moveDown4 {100% {transform: translateY (-1600px);}} @keyframes moveDown5 {100% {transform: translateY (-2000px);}} @keyframes moveDown6 {100% {transform: translateY (-2400px);}} @keyframes moveDown7 {100% {transform: translateY (-2800px);}} @keyframes moveUp {100% {transform: translateY (400px);}} @keyframes moveUp1 {100% {transform: translateY (400px);}} @keyframes moveUp2 {100% {transform: translateY (800px);}} @keyframes moveUp3 {100% {transform: translateY (1200px);}} @keyframes moveUp4 {100% {transform: translateY (1600px);}} @keyframes moveUp5 {100% {transform: translateY (2000px);}} @keyframes moveUp6 {100% {transform: translateY (2400px);}} @keyframes moveUp7 {100% {transform: translateY (2800px);}}

      var x, y;// box coordinates
        // Move 1 = Up, 2 = Down
        function move (direct) {
            const objBox = document.getElementById ("box");
            const cssStyle = window.getComputedStyle (objBox);
            y = parseInt (cssStyle.top.match (/(.*)px/) [1]);
            let anim ='';
            let divno = 0;// Display position after change
            switch (direct) {
                case 1:
                    if (y>= -2400) {
                        anim ='moveDown';
                        divno = ((y/-400) + 1);// Display position after change
                    }
                    break;
                case 2:
                    if (y<= -400) {
                        anim ='moveUp';
                        divno = ((y/-400) -1);// Display position after change
                    }
                    break;
            }
            if (anim! =='') {
                document.getElementById ('divno'). selectedIndex = divno;// Change combo box valueobjBox.style.animationDuration = '1s';// Animation execution speed setting
                objBox.style.animationName = anim;// Start animation
                btnsDisabled (true);// Button disabled
            }
        }
        // When changing the combo box
        function selected () {
            const objBox = document.getElementById ("box");
            const cssStyle = window.getComputedStyle (objBox);
            y = parseInt (cssStyle.top.match (/(.*)px/) [1]);
            let anim ='';
            let divnofrom = (y/-400);// Current display position
            let divnoto = document.getElementById ('divno'). selectedIndex;// Display position of move destination
            let move = 0;// distance traveled
            if (divnofrom  divnoto) {
                move = (divnofrom --divnoto);
                anim ='moveUp' + move;
            }
            if (anim! =='') {
                objBox.style.animationDuration = move +'s';// Animation execution speed setting
                objBox.style.animationName = anim;// Start animation
                btnsDisabled (true);// Button disabled
            }
        }
        // Processing at the end of animation
        document.addEventListener ('animationend', () =>{
            const objBox = document.getElementById ("box");
            const cssStyle = window.getComputedStyle (objBox);
            const arr = cssStyle.transform.match (/ \ ((. *) \) /) [1] .split (",");// string matrix (a, b, c, d, cx, cy) Disassembly
            y + = parseInt (arr [5]);// add the value of transform.y
            objBox.style.transform ='';// Erase the animated transform
            objBox.style.top = y +'px';
            objBox.style.animationName ='';// Delete animationName. If you do not do this, the animation in the same direction will not work next time.
            btnsDisabled (false);// Button enable
        });
        // Enable/disable arrow buttons
        function btnsDisabled (arg) {
            let btns = document.getElementsByTagName ("input");
            for (let i = 0;i<btns.length;i ++) {
                btns [i] .disabled = arg;
            }
            document.getElementById ('divno'). disabled = arg;// Combo box
        }