使用Javascript

Question

我有一个CSS动画，我想用JS控制

我的动画：

http://jsfiddle.net/link2twenty/ny5rb41f/

@keyframes dash {
    from {
        stroke-dashoffset: 55;
    }
    to {
        stroke-dashoffset: 0;
        stroke-width: 2;
    }
}

@keyframes spinner {
    from {
        transform: rotate(-315deg);
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%); 
        -o-filter: grayscale(100%);
        opacity: .2;
    }
    to {
        transform: rotate(0deg);
         filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
        -moz-filter: grayscale(0%);
        -ms-filter: grayscale(0%); 
        -o-filter: grayscale(0%);
        opacity: 1;
    }
}

在my application中，当前用户在屏幕上下拉时，会更新课程样式。这有时会导致延迟，而且我的新动画更加复杂，我担心它可能会导致更多的延迟。

我想也许在不同的阶段有几个类，然后在它到达正确的距离时更新元素类，但是为了使它顺利，我们需要非常长的代码，

所以真正的问题是;有没有办法用JavaScript控制CSS动画，而不必将动画的每个部分都写成一个单独的类。

Answer 1

您可以创建一个类调用animate，在此类中放置所有animate属性。稍后使用javascript，在本例中为jQuery，您可以添加此类来启动动画，如下所示：

＆＃13;

＆＃13;

$('button').click(function () {
    $(".refreshIcon").addClass("animate");
    $(".refreshStem").addClass("animate2");
});

＆＃13;

.container {
    background: white;
}
.animate {
    animation: spinner 3s;
    animation-fill-mode:forwards;
    animation-iteration-count: 1;
}
.animate2 {
    animation: dash 3s linear;
    animation-fill-mode:forwards;
    animation-iteration-count: 1;
}

.refreshIcon {
    pointer-events: none;
    display: block;
    height: 32px;
    width: 32px;
}
.refreshStem {
    stroke-dasharray: 55;

    fill: rgba(0, 0, 0, 0);
    stroke: blue;
    stroke-width: 1;
}
.refreshHead {
    fill: blue;
    stroke-width: 0; 
}
@keyframes dash {
    from {
        stroke-dashoffset: 55;
    }
    to {
        stroke-dashoffset: 0;
        stroke-width: 2;
    }
}

@keyframes spinner {
    from {
        transform: rotate(-315deg);
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%); 
        -o-filter: grayscale(100%);
        opacity: .2;
    }
    to {
        transform: rotate(0deg);
         filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
        -moz-filter: grayscale(0%);
        -ms-filter: grayscale(0%); 
        -o-filter: grayscale(0%);
        opacity: 1;
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg class="refreshIcon" viewBox="0 0 24 24">
    <g>    
        <path 
        class="refreshStem" 
        transform="rotate(-45 12.000000476837158,12.000000476837158), translate(24), scale(-1, 1)"
        d="m5.02361,12c0,-3.87126 3.12203,-7.00698 6.97639,
        -7.00698c3.85436,0 6.97639,3.13572 6.97639,
        7.00698c0,3.87126 -3.12203,7.00698 -6.97639,7.00698c-3.85436,
        0 -6.97639,-3.13572 -6.97639,-7.00698z" />                
        <rect 
        fill="#ffffff" 
        stroke-width="0" 
        x="17" 
        y="11.029" 
        width="4" 
        height="3" 
        stroke="#ffffff"/>
        <path 
        class="refreshHead" 
        d="m12.97192,10.96708l0,-6.99941l7.06761,6.99941l-7.06761,0z"
        transform="rotate(-90 16.5,7.5) " />
    </g>
 </svg>
 <button >start</button>

＆＃13;

＆＃13;

＆＃13;