JavaScript解决方案：

Question

我有一个DIV，在下列情况下将bgcolor更改为蓝色：悬停。按钮单击添加将bgcolor设置为绿色的类。但现在：悬停不会工作（bgcolor不会改为蓝色）。

为什么？

HTML：

<div class="box"></div>
<button class="animate-btn">Animate</button>

CSS：

.box {
        background-color: red;
        width: 200px;
        height: 200px;
    }
    .box:hover {
        background-color: blue;
    }

    .trigger-bg-change {
        -webkit-animation: bg-change 1s ease 0 1 forwards;
        animation: bg-change 1s ease 0 1 forwards;  
    }

    @-webkit-keyframes bg-change {
        0% {background-color:red;}
        100% {background-color:green;}
    }
    @-keyframes bg-change {
        0% {background-color:red;}
        100% {background-color:green;}
    }

JS：

$(function() {
        $('.animate-btn').on('click', function() {
            console.log('hey');
            $('.box').addClass('trigger-bg-change');
        });
});

Answer 1

DEMO

您可以使用.trigger-bg-change的以下CSS规则：

.trigger-bg-change {
    background-color: green;
    -webkit-animation: bg-change 1s ease 0 1 none;
    animation: bg-change 1s ease 0 1 none;  
}

通过将 animation-fill-mode 属性从forwards更改为none，动画在执行后不会将样式应用于元素，因此规则.box:hover不会被覆盖。

Answer 2

DEMO 1 (With JavaScript - See code below)

DEMO 2 (Without JavaScript - See code below)

JavaScript解决方案：

HTML

<div class="box-init"></div>
<button class="run-btn">Run Animation</button>

CSS

.box-init, .box-post {
    width: 200px;
    height: 200px;
    margin-bottom:10px;
}

.box-init{
  background-color: red;
}

.box-post{
  background-color: green;
}

.box-post:hover{
  background-color:blue;
}

.box-transition{
  transition-property: background-color; 
  transition-duration: 0.5s; 
  transition-timing-function: ease; 
  transition-delay: 0s;
}

.box-animation{
    /*Animation properties*/
    animation-name: bg-change;
    animation-duration: 0.5s; /*  <-- ANIMATION DURATION IS 0.5 SECONDS!!  */
    animation-iteration-count: initial;
    animation-direction: initial;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes bg-change {
    100% {background-color:green;}
}

JavaScript

const runBtn = document.querySelector('.run-btn');
const box = document.querySelector('.box-init');

runBtn.addEventListener('click', ()=>{
    box.classList.add("box-animation"); // animation duration is 0.5 seconds
  setTimeout(() => { // so after 0.6 seconds we will remove the animation
    box.classList.add("box-post");
    box.classList.remove("box-init");
    box.classList.remove("box-animation");
    box.classList.add("box-transition");
  }, 600); //0.6 seconds

});

替代解决方案（不使用JavaScript）：

HTML

<div class="box"></div>

CSS

.box {
    background-color: red;
    width: 200px;
    height: 200px;
    margin-bottom:10px;

    /*Animation properties*/
    animation-name: bg-change;
    animation-duration: 0.5s;
    animation-iteration-count: initial;
    animation-direction: initial;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes bg-change {
    0% {background-color:red;}
    100% {background-color:green;}
}

.box:hover{
    /*Animation properties*/
    animation-name: hover-animation;
    animation-duration: 0.5s;
    animation-iteration-count: initial;
    animation-direction: initial;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes hover-animation {
    0% {background-color: green;}
    100% {background-color:blue;}
}

css3：悬停在动画后不起作用

2 个答案:

JavaScript解决方案：

替代解决方案（不使用JavaScript）：