title: Vue JS Keyframes with js
body: <p>I'm trying to set the value of a <code>@keyframe</code> transform pro grammatically.</p>
  
  <pre><code>.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);
      }
  </code></pre>
  
  <p>I need to alter the 100% value to one I generate with JavaScript</p>
  
  <pre><code>spinWheel() {
      let segments = [], segmentSize, winningSegment, app = this;
  
      app.spin = 'spin';
      //each segment
      segmentSize = 360 / 6;
      for(let i = 0; i &lt;= 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);
  
  }
  </code></pre>
  
  <p>So when the method <code>spinWheel()</code> is run</p>
  
  <pre><code>100% {
      transform: rotate(end);
  }
  </code></pre>
  
  <p>Would change to the app.end value.</p>
  
  <p>I just can't seem to figure out how to do this. Any help is much appreciated. </p>