animate.css: Xaringan 动画转场

Xaringan 的动画转场效果,可以用 animate.css 实现。只需在 yaml 里声明一下 animate.css 的路径,然后每张幻灯片开头声明一下 class 即可(或者用 layout 来批量控制连续若干片子的转场效果)。下面是个完整的 Rmd 文件示例:

---
title: "zoomOutUp"
output:
  xaringan::moon_reader:
    css:
      - default
      - default-fonts
      - "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"
    lib_dir: libs
---
layout: true
class: inverse, center, middle, animated, zoomIn

---

# Yeah, Xaringan has animations...

---

# if animate.css!

---
layout: false
class: inverse, left, center, middle

# Click me and press the left or right arrow to see the zoomOutUp effect.

---

下面是开头幻灯片的 gif 动画版(感谢 @zhouyisu 制作)。

下面是 animate.css 提供的 77 个转场效果示例。点击片子按箭头键即可预览。

bounceIn

bounceInDown

bounceInLeft

bounceInRight

bounceInUp

fadeIn

fadeInDown

fadeInDownBig

fadeInLeft

fadeInLeftBig

fadeInRight

fadeInRightBig

fadeInUp

fadeInUpBig

flipInX

flipInY

jackInTheBox

lightSpeedIn

rollIn

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

slideInDown

slideInLeft

slideInRight

slideInUp

zoomIn

zoomInDown

zoomInLeft

zoomInRight

zoomInUp

bounce

flash

headShake

heartBeat

hinge

jello

pulse

rubberBand

shake

swing

tada

wobble

bounceOut

bounceOutDown

bounceOutLeft

bounceOutRight

bounceOutUp

fadeOut

fadeOutDown

fadeOutDownBig

fadeOutLeft

fadeOutLeftBig

fadeOutRight

fadeOutRightBig

fadeOutUp

fadeOutUpBig

flipOutX

flipOutY

lightSpeedOut

rollOut

rotateOut

rotateOutDownLeft

rotateOutDownRight

rotateOutUpLeft

rotateOutUpRight

slideOutDown

slideOutLeft

slideOutRight

slideOutUp

zoomOut

zoomOutDown

zoomOutLeft

zoomOutRight

zoomOutUp

comments powered by Disqus