| depends | relates | since | tags | description | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
v0.48.0 |
|
控制代码变化时的细粒度过渡，类似于 Keynote 中的 Magic Move 效果。
|
Shiki Magic Move 让你能够控制代码变化时的细粒度过渡，类似于 Keynote 中的 Magic Move 效果。在 此处 查看它是如何工作的。
Screen.Recording.2024-03-10.at.15.53.03.mov
在 Slidev 中，我们将 Magic Move 绑定到 点击事件 中。它的语法是用````md magic-move 包裹代表每个步骤的代码块（注意是四个反引号）。这将被转换为一个根据动画步骤变化的代码快。
````md magic-move
```js
console.log(`Step ${1}`)
```
```js
console.log(`Step ${1 + 1}`)
```
```ts
console.log(`Step ${3}` as string)
```
````也可以将 Magic Move 和 及 混合使用，例如：
````md magic-move {at:4, lines: true} // [!code hl]
```js {*|1|2-5} // [!code hl]
let count = 1
function add() {
count++
}
```
在代码块之间的内容会被忽略，可以作为注释。
```js {*}{lines: false} // [!code hl]
let count = 1
const add = () => count += 1
```
````