如何使用js将多个动画名称添加到css

Question

我想用 JS 更改animation-name 属性。

因此，在第一次更改之后，不会发生第二次或第三次更改

我想要的是在每次点击输入时重置 CSS 中的旧值并写入一个新值。

(function () {

    //define values
    var rotateY = 0,
          rotateX = 0;

    // keydown eventhandler
        document.onkeydown = function (e) {

            if (e.keyCode === 37/*LEFT*/) rotateY -= 5
            else if (e.keyCode === 38/*TOP*/) rotateX += 5
            else if (e.keyCode === 39/*RIGHT*/) rotateY += 5
            else if (e.keyCode === 40/*BOTTOM*/) rotateX -= 5

            //Add degrees to transform:;
            document.querySelector('.cube').style.transform =
            'rotateY(' + rotateY + 'deg)'+'rotateX(' + rotateX + 'deg)';

        }
})();





// true = visible, false = hidden

function $switch(backface_boolean){

    let sides = Array.from(document.querySelectorAll('.side'));

    let bface_status = document.querySelector('.backface_status');

    if (backface_boolean === true){
        for (let i = 0; i < sides.length; i++)
            sides[i].style.backfaceVisibility = "visible";

        bface_status.innerHTML = "backface-visibility: visible;";
        }


    else if(backface_boolean === false){
        for (let i = 0; i < sides.length; i++)
            sides[i].style.backfaceVisibility = "hidden";

        bface_status.innerHTML = "backface-visibility: hidden;";
   }

    else
        return;
}





const CUBE_BODY = document.querySelector('.cube');
const CUBE_SIDE = document.querySelector('.side')


const ROTATE_X_AXIS = function() {
    CUBE_BODY.style.animationName = "rotX";
}

const ROTATE_Y_AXIS = function() {
    CUBE_BODY.style.animationName = "rotY";
}
const ROTATE_BOTH_AXIS = function() {
    CUBE_BODY.style.animationName = "normal_rot";   
}

*, 
*::before, 
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-size: 15px 15px;
    background-image: linear-gradient(90deg, blue 1px, transparent 0px), linear-gradient(blue 1px, transparent 0px);
    font-family: Arial, sans-serif;
}

[type="radio"]{
    cursor: pointer;
    width: 18px;
    height: 18px;
}

label{
    font-weight: bold;
    letter-spacing: 1px;
}

button{
    cursor: pointer;
}

hr{
    display: block;
    height: 1px;
    border: none;
    outline: none;
    background: whitesmoke;
    margin: 10px 0;
}

/*
    Settings for container
*/
.container {
    text-shadow: -5px 5px 1px rgba(255,255,255,0.2);
    position: relative;
    width: 300px;
    height: 300px;
    margin: 200px auto;
    perspective: 700px;

}

/*
    Settings for Cube
*/
.cube {
    width: inherit;
    height: inherit;
    /* Default: transform-style: flat;*/
    transform-style: preserve-3d;/*this code pass 3D spaces to > divs*/
    transition: all 50ms;
    animation-name: ;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-delay: 600ms;
}

/*
    Settings for Sides
*/
.side {
    position: absolute;
    width: inherit;
    height: inherit;
    border: 5px solid red;
    font: normal 65px Arial;
    text-align: center;
    line-height: 300px;
    color: darkred;
    backface-visibility: visible;
    animation-name: ;
    animation-duration: 10s;
    animation-iteration-count: 1;
}



.front {
    transform: translateZ(150px);
}

/* Rotate Sides */
.back {
    transform: rotateY(180deg) translateZ(150px);
}
.right {
    transform: rotateY(90deg) translateZ(150px);
}
.left {
    transform: rotateY(-90deg) translateZ(150px);
}
.top{
    transform: rotateX(90deg) translateZ(150px);
}
.bottom {
    transform: rotateX(-90deg) translateZ(150px);
}


/* Controls*/


.controls{
    background: rgba(0,0,0,.8);
    position: relative;
    bottom: 1px;
    width: 100%;
    height: auto;
    outline: 3px solid green;
    outline-offset: calc(10px * 2);
}


.backface{  
    color: whitesmoke;
    text-align: center;
    display: block;
}

.backface_status{
    color: #50cdea;
    font-style: italic;
    padding: 10px 0;
}



.assembly_btn{
    padding: 10px;
    color: white;
    background-color: rgba(255,0,0, 0.7);
    border: 2px solid #000;
    transition: all 300ms;
}

.assembly_btn:hover{
    background-color: rgba(255,0,0, 1);
}
.assembly_btn:active{
    opacity: .5;
    border: 3px groove #000;
}
.assembly_btn:focus{
    box-shadow: 0 0 5px blue;
    font-weight: 900;
}

.rotate_container p{
    padding-top: 5px;
    margin: 5px 20px 5px 20px;
    color: white;
    border-top: 2px dashed #fff;
    border-left: 2px dashed #fff;
    border-right: 2px dashed #fff;
    border-bottom:none;

}

.rotate_container:not(p){
    color: #50cdea;
}



/* Animations */

@keyframes disAsb_asb{
    50%{
        transform: rotateX(180deg);
    }
}


@keyframes rotX{
    25%{
        transform: rotateX(90deg);
    }
    50%{
        transform: rotateX(180deg);
    }
    75%{
        transform: rotateX(260deg);
    }
    
    100%{
        transform: rotateX(360deg);
    }

}

@keyframes rotY{
    25%{
        transform: rotateY(90deg);
    }
    50%{
        transform: rotateY(180deg);
    }
    75%{
        transform: rotateY(260deg);
    }
    
    100%{
        transform: rotateY(360deg);
    }
}

@keyframes normal_rot{
    25%{
        transform: rotateX(90deg) rotateY(90deg);
    }
    50%{
        transform: rotateX(180deg) rotateY(180deg);
    }
    75%{
        transform: rotateX(266deg) rotateY(266deg);
    }

    85%{
        transform: rotateX(360deg) rotateY(360deg);
    }

}

<!DOCTYPE html>
<html lang="en-US">
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>CSS 3D Cube</title>
    <link rel="stylesheet" type="text/css" href="./cube.css">

</head>
<body>

<div class="container">
    <div class="cube">
        <div class="side front">1</div>
        <div class="side back">3</div>
        <div class="side right">-1</div>
        <div class="side left">-2</div>
        <div class="side top">4</div>
        <div class="side bottom">2</div>
    </div>
</div>

<script src="./cube.js"></script>

<div class="controls" align="center">
    <div class="backface" align="center">
        <p class="backface_status">backface-visibility: visible;</p>

        <label>visible: <input type="radio" name="backface" checked onclick="$switch(true)"></label>

        &nbsp;

        <label>hidden: <input type="radio" name="backface" onclick="$switch(false)"></label>
    </div>
    <hr>

    
    <div class="rotate_container">
        <p>Auto Rotate Modes:</p>
        <br>
        Rotate only X axis: <input type="radio" name="rotate" onclick="ROTATE_X_AXIS()">
        
        &nbsp;

        Rotate only Y axis: <input type="radio" name="rotate" onclick="">
        
        &nbsp;

        Rotate both axis: <input type="radio" name="rotate" onclick="">
        Auto Rotate Off: <input type="radio" name="rotate"
        checked>
    </div>

    <hr>
    <button type="button" class="assembly_btn">Disassembly and Assembly Cube</button>
    <hr>

    <div class="cube_bg_container">
        none
    </div>
</div>
</body>
</html>

Answer 1

请确保您为animation-duration 设置了正确的值

const CUBE_BODY = document.querySelector('.cube');
const CUBE_SIDE = document.querySelector('.side')


const ROTATE_X_AXIS = function () {
  CUBE_BODY.style.animationName = "rotX";
}

const ROTATE_Y_AXIS = function () {
  CUBE_BODY.style.animationName = "rotY";
}

const ROTATE_BOTH_AXIS = function () {
  CUBE_BODY.style.animationName = "normal_rot";
}

.cube, .side {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  margin: 50px;
  animation-duration: 5s;
}
/* __X AXIS ROTATION___*/

@keyframes rotX {
  25% {
    transform: rotateX(90deg);
  }

  50% {
    transform: rotateX(180deg);
  }

  75% {
    transform: rotateX(260deg);
  }

  100% {
    transform: rotateX(360deg);
  }
}


/* __Y AXIS ROTATION___ */

@keyframes rotY {
  25% {
    transform: rotateY(90deg);
  }

  50% {
    transform: rotateY(180deg);
  }

  75% {
    transform: rotateY(260deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

<span> Rotate only X axis:</span> <input type="radio" name="rotate" onclick="ROTATE_X_AXIS()">

<span> Rotate only Y axis:</span> <input type="radio" name="rotate" onclick="ROTATE_Y_AXIS()">

<span> Rotate both axis:</span> <input type="radio" name="rotate" onclick="ROTATE_BOTH_AXIS()">

<div class="cube"></div>
<div class="side"></div>