Skip to content

Latest commit

 

History

History
48 lines (40 loc) · 1.36 KB

File metadata and controls

48 lines (40 loc) · 1.36 KB
theme default
mdc true
transition slide-left
<script setup> import { ref } from 'vue' import KaTeXMagicMove from '/components/KaTexMagicMove.vue' const equations = [ String.raw`\begin{pmatrix} 1 & 2\\ 3 & 4 \end{pmatrix}`, String.raw`\begin{pmatrix} 3 & 4\\ 1 & 2 \end{pmatrix}`, ] const step = ref(0) const next = () => { step.value = Math.min(equations.length - 1, step.value + 1) } const prev = () => { step.value = Math.max(0, step.value - 1) } </script>

KaTeX Magic Move (custom)

用自定义组件让 KaTeX 公式做「magic move」式形变。每次点击切换一步,元素按渲染顺序做 FLIP 动画:

Prev Next Step {{ step + 1 }} / {{ equations.length }}
Tip: 也可以用 `v-click` 或 `$slidev.nav.next()` 驱动 step。
渲染节点按顺序匹配,LaTeX 结构越接近,形变越像 Manim。