Question

我正在为我的按钮制作素材风格动画。试图避免任何JS，所以来到以下样式：

//动画

.btn {
    position: relative;

    &:after {
        content: '';
        position: absolute;
        top: 0; bottom: 0; left: -10%; right: -10%;
        border-top-left-radius: 2% 50%;
        border-bottom-left-radius: 2% 50%;
        border-top-right-radius: 2% 50%;
        border-bottom-right-radius: 2% 50%;
        background-color: fade(black,5%);
        transform: scale(0,1);
        opacity: 0;
    }

    &:focus {

        &:after {
            animation: click-animation .6s linear;
            animation-fill-mode: backwards;
        }
    }
}

@keyframes click-animation {
    0% {
        opacity: 0;
        transform: scale(0,1);
    }
    50% {
        opacity: 1;
        transform: scale(.5,1);
    }
    100% {
        opacity: 0;
        transform: scale(1,1);
    }
}

它的工作方式与预期相同（至少在Chrome上）。问题是如果多次单击该按钮，动画将只触发一次。发生这种情况是因为按钮已经“聚焦”，因此它不会重复动画。单击按钮外的任何位置，然后再次单击该按钮可以解决问题。任何想法如何解决这个问题？

Answer 1

您可以替换＆＃34;＆amp;：focus＆＃34;通过＆＃34;＆amp;：not（：active）＆＃34;并在页面加载期间隐藏您的按钮以处理第一个动画。这里有更多解释：https://www.screenfeed.fr/blog/css3-animation-on-click-without-js-0828/

Answer 2

Tyrian建议使用&:focus:not(:active)是一个很好的建议。但是，如果您想让鼠标按下而不是鼠标按下来制作动画，那么以下不完全理想的方法可能会有所帮助。

我的方法存在的问题是动画触发前有30毫秒的超时时间。删除setTimeout会使我测试过的所有浏览器只播放一次动画。在Firefox上，将30毫秒超时更改为10毫秒似乎会导致竞争，导致动画无法始终播放。在较慢的浏览器上，延迟可能需要更长的时间。

<script>
function flashButton (elem) {

    "use strict";

    elem.classList.remove("animate");
    setTimeout(function() {
        elem.classList.add("animate");
    }, 30);
}
</script>

<style>
button.animate {
    animation-name: button-animation;
    animation-duration: 0.3s;
}
@keyframes button-animation {  
    from { background: #555555; }
    to   { background: #9F9F9F; }
}
</style>

<button onfocus="flashButton(this)" onmousedown="flashButton(this)">X</button>

该代码的工作方式是删除动画类，然后立即重新添加它，以便动画几乎立即发生。

如果单击的次数超过动画的持续时间，则单击后立即添加类，然后将其延迟删除将不会很好。

焦点重置的CSS动画

2 个答案: