Javascript Vue JS关键帧与JS

我试图按语法设置

@关键帧的值

.spin {
    animation-name: spin;
    animation-duration: 3s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(1665deg);
    }

我需要将100%的值更改为使用JavaScript生成的值

spinWheel() {
    let segments = [], segmentSize, winningSegment, app = this;

    app.spin = 'spin';
    //each segment
    segmentSize = 360 / 6;
    for(let i = 0; i <= 5; i++)
    {
        segments[i] = i*segmentSize;
    }
    winningSegment = Math.floor(Math.random() * 6);
    let start = winningSegment === 0 ? 0 : segments[winningSegment];
    let end   = winningSegment === 5 ? 360 : segments[winningSegment+1];
    let winningArea = {start: start  , end: end };

    app.start = 0;
    app.end = (360 * Math.floor(Math.random() * (30 - 15 + 1) + 15)) + Math.floor(Math.random() * (winningArea.end - winningArea.start + 1) + winningArea.start);

}

将更改为app.end值

我只是不知道怎么做。非常感谢您的帮助
 在JavaScript中创建或修改关键帧是有问题的。你愿意使用网络动画API吗？对于任何非Chrome浏览器，您都需要使用polyfill，但有一个很好的polyfill可用。如果有任何可用的解决方案，我将使用VueJs（因为我使用的是laravel后端，vue随附）。我不介意在转换完成后触发事件，因为我很快就会需要它。那一定要看看Web动画API。它允许使用
元素进行基于关键帧的动画。animate（关键帧，选项）
，它返回一个
动画
实例，该实例发出一个
完成
事件。听起来很合适。
100% {
    transform: rotate(end);
}