File size: 813 Bytes
4d70170 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<script>
import { onUnmounted, reactive, ref } from 'vue'
export default {
setup() {
const animate = ref(false)
const size = reactive({
width: 10,
height: 10,
})
const timer = setInterval(() => {
if (!animate.value) {
return
}
size.width = Math.round(Math.random() * 100)
size.height = Math.round(Math.random() * 100)
}, 1000)
onUnmounted(() => {
clearInterval(timer)
})
return {
size,
animate,
}
},
}
</script>
<template>
<div
class="animation"
:style="{
width: `${size.width * 10}px`,
height: `${size.height * 10}px`,
}"
@click="animate = !animate"
/>
</template>
<style lang="postcss" scoped>
.animation {
transition: all 1s linear;
background: #42B983;
}
</style>
|