Vue3 文档使用css 来实现过渡,但我想尝试(相对较新的)Web 动画 API - 部分原因是我在 CSS 中使用变量时遇到问题。
以下代码有效:
<script setup>
import { ref } from 'vue'
import comp from './comp.vue'
function moveCircle() {
let elem = document.getElementById("circle");
if (elem) {
elem.animate(
[
{ transform: "translateX(0px)"},
{ transform: "translateX(320px)"}
], 500
)
}
}
</script>
<template>
<div>
<comp id="circle"></comp>
<button @click="moveCircle()">Move it</button>
</div>
</template>
(比较)
<script setup></script>
<template>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</template>
Vue 游乐场在这里
...但我想摆脱一些麻烦getElementById
,而是使用Vue 模板 refs:
<script setup>
import { ref } from 'vue'
import comp from './comp.vue'
const circle = ref(null);
function moveCircle() {
let elem = circle.value;
if (elem) {
elem.animate(
[
{ transform: "translateX(0px)"},
{ transform: "translateX(320px)"}
], 500
)
}
}
</script>
<template>
<div>
<comp ref="circle"></comp>
<button @click="moveCircle()">Move it</button>
</div>
</template>
但这不会做动画(修改后的操场)。有一次我遇到了错误animate() is not a function
,但现在没有错误了——只是什么也没发生。这样做的正确方法是什么?