时间戳

首页 > 解决方案 > 如何使项目符号逐渐出现在 RMarkdown 的 flexdashboard 故事板中？

javascript - 如何使项目符号逐渐出现在 RMarkdown 的 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

标签： javascriptrr-markdownflexdashboard

解决方案

对我有用的解决方案是下拉到 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

推荐阅读