如何使项目符号在RMarkdown的flexdashboard故事板上逐步显示?

haf*_*aff 9 javascript r r-markdown flexdashboard

我想在单击右箭头(演示样式)时使flexdashboard / storyboard上的项目符号项逐渐显示。如何做到这一点?我正在猜测一些Javascript,但不知道从哪里开始。从Rmd导出的Ioslides可以选择增量项目符号,但是我希望能够在每个幻灯片的基础上进行,并且无论如何我都希望Flexdashboard / storyboard具有更大的灵活性。

查看此MWE:

---
title: "How to increment?"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
---

### Slide 1

```{r}
hist(rnorm(100))
```

***

- I want these bullets
- to appear
- incrementally

### Slide 2

```{r}
hist(runif(100))
```

***

- I want these bullets
- to appear
- all at once
- when this slide
- comes up
Run Code Online (Sandbox Code Playgroud)

Sha*_*mis 2

对我有用的解决方案是下拉到knitr并使用原始html输出的指令。Rest 是一个有点丑陋的 javascript。(并不是说 javascript 很丑陋。只是我使用了丑陋的方式来实现预期的结果。肯定有一种更干净的方式来做同样的事情。)

请注意,这是最小的示例 - 该解决方案当前处理整个文档的 onclick 事件,而不考虑其他任何事情。因此,如果您决定走这条路,您将不得不处理诸如从第二张幻灯片返回等情况。

---
title: "How to increment?"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
---

### Slide 1

```{r}
hist(rnorm(100))
```


***
```{r}
knitr::raw_html("<ul>")
knitr::raw_html("<li id='test1' style='display:none'> I want these bullets </li>")
knitr::raw_html("<li id='test2' style='display:none'> to appear </li>")
knitr::raw_html("<li id='test3' style='display:none'> incrementally </li>")

knitr::raw_html("</ul>")
```


```{js}
displayed = 0;
display = function() {
  displayed++;
  id = "test" + displayed;
  el = document.getElementById(id);
  el.style.display = "list-item";
}
document.onclick=display
```

### Slide 2

```{r}
hist(runif(100))
```

***

- I want these bullets
- to appear
- all at once
- when this slide
- comes up
Run Code Online (Sandbox Code Playgroud)