CSS 의 transition 사용하기

<!-- App. vue -->
<template>
    
  <div 
  
    @mousedown="mouseDown" 
    id="panel"
    :style="style"
  
  ></div>

</template>

<script>

  import { reactive } from 'vue'
  import { random } from 'lodash'

  export default {

    setup() {

      const style = reactive({})

      function mouseDown() {

        style.backgroundColor = `rgb(${random(255)}, ${random(255)}, ${random(255)})`
        style.transform       = `rotate(${random(360)}deg)`
        style.borderRadius    = `${random(50)}% ${random(50)}% ${random(50)}% ${random(50)}%`
        
      }

      return { style, mouseDown}

    }
    

  }


</script>


<style scoped>

  #panel {

    position: absolute;
    left : 50px;
    top : 50px;
    width : 100px;
    height : 100px;
    background-color: yellow;
    transition: all 0.2s linear;


  }

</style>