说一说animation

2018-05-18

前言

最近在研究动画，上一篇也说过animation + @keyframes实现动画的方法，现在着重介绍一下animation的各种属性。

所有属性汇总

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。

缩写语法：

1	animation: name duration timing-function delay iteration-count direction fill-mode play-state;

一般来说，前端想要实现流畅的动画效果，建议使用css动画。但是，我们知道css动画只会显示一次，之后就不会有动画效果了。

现在的需求是：点击这个元素时，触发一次css动画，再点击动画消失。

问题：如何让css动画重新启动？

解决方法： https://css-tricks.com/restart-css-animation/

只选择了一种方法，案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"><meta name="viewport" id="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="js/jquery-2.2.3.min.js"></script>
    <title>Title</title>
</head>
<body>
<div class="timer-group" id="timerGroup">
    <div class="timer minute">
        <i class="state-icon state-pause"></i>
        <div class="hand hand-right"><span id="animationRight"></span></div>
        <div class="hand hand-left"><span id="animationLeft"></span></div>
    </div>
</div>
<style>
    .timer-group{
        width: 120px;
        height: 120px;
    }
    .timer {
        position: relative;
        width: 120px;
        height: 120px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 1px solid #ccc;
    }
    .timer:after {
        content: "";
        position: absolute;
        left: 5px;
        top: 5px;
        height: 110px;
        width: 110px;
        background: #fff;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    .state-pause{
        position: absolute;
        left: 50px;
        top: 30px;
        width: 0;
        height: 0;
        border: 35px solid transparent;
        border-left: 40px solid #66ffcc;
        z-index: 99;
    }
    .state-play{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 46px;
        height: 46px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background-color: #66ffcc;
        z-index: 99;
    }
    .timer .hand {
        overflow: hidden;
        position: relative;
        float: left;
        width: 50%;
        height: 100%;
    }

    .timer .hand span {
        position: absolute;
        right: 0;
        top: 0;
        width: 0;
        height: 0;
        border: 50px solid #6fc;
        border-bottom-color: transparent;
        border-left-color: transparent;
        transform: rotate(225deg);
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    .timer .hand-right {
        transform: rotate(180deg);
    }
    .timer .hand span{
        border-width: 60px;
    }
    .timer .hand-right span.run-animation {
        animation: spin1 10s linear 1;
    }
    .timer .hand-left span.run-animation{
        animation: spin2 10s linear 1;
    }
    @keyframes spin1 {
        0% {
            transform: rotate(225deg);
        }
        50% {
            transform: rotate(225deg);
        }
        100% {
            transform: rotate(405deg);
        }
    }
    @keyframes spin2 {
        0% {
            transform: rotate(225deg);
        }
        50% {
            transform: rotate(405deg);
        }
        100% {
            transform: rotate(405deg);
        }
    }
</style>
<script>
    "use strict";
    // retrieve the element
    var element = document.getElementById("timerGroup");
    var animationRight = document.getElementById("animationRight");
    var animationLeft = document.getElementById("animationLeft");
    // reset the transition by...
    var flag = true;
    element.addEventListener("click", function(e) {
        e.preventDefault;
        if(flag){
            // -> removing the class
            animationRight.classList.remove("run-animation");
            animationLeft.classList.remove("run-animation");

            // -> triggering reflow /* The actual magic */
            // without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered.
            void element.offsetWidth;

            // -> and re-adding the class
            animationRight.classList.add("run-animation");
            animationLeft.classList.add("run-animation");
            $(".state-icon").removeClass("state-pause").addClass("state-play");
            flag = false;
        }else{
            animationRight.classList.remove("run-animation");
            animationLeft.classList.remove("run-animation");
            $(".state-icon").removeClass("state-play").addClass("state-pause");
            flag = true;
        }
    }, false);
</script>
</body>
</html>