使用js的Vue JS关键帧

Question

我试图以语法方式设置@keyframe转换的值。

.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);

}

所以当方法spinWheel()运行时

100% {
    transform: rotate(end);
}

会更改为app.end值。

我似乎无法弄清楚如何做到这一点。任何帮助深表感谢。