你能淡入(动画)R标记文档的部分吗

你能淡入(动画)R标记文档的部分吗,r,r-markdown,R,R Markdown,是否有一种方法可以使R标记文档的每个部分仅在用户到达后加载 我这样问是因为我使用的是Highcharter,当图表加载时,它们会有一个动画。这些动画发生在页面加载时,因此用户不会看到它,因为每个部分都是模拟加载的 我想这与创建自定义CSS有关?我基本上希望在用户滚动到该部分后加载该部分 下面是一个可复制的例子,说明了我到目前为止的进展。如果看到选项卡集2,动画会使图表淡入,但由于元素已加载,图表上没有动画(即重新加载线条) --- 标题:“最低限度的例子” 输出: html_文件: toc:没错

是否有一种方法可以使R标记文档的每个部分仅在用户到达后加载

我这样问是因为我使用的是Highcharter,当图表加载时,它们会有一个动画。这些动画发生在页面加载时,因此用户不会看到它,因为每个部分都是模拟加载的

我想这与创建自定义CSS有关?我基本上希望在用户滚动到该部分后加载该部分

下面是一个可复制的例子,说明了我到目前为止的进展。如果看到选项卡集2,动画会使图表淡入,但由于元素已加载,图表上没有动画(即重新加载线条)

---
标题:“最低限度的例子”
输出:
html_文件:
toc:没错
toc_浮动:
失败:错误
平滑滚动:真
---
```{r,echo=FALSE}
aniview::使用_aniview()
```
```{css,echo=FALSE}
p{
边缘顶部:25px;
字号:21px;
文本对齐:居中;
-webkit动画:fadein 10s;/*Safari、Chrome和Opera>12.1*/
-moz动画:fadein 10s;/*Firefox<16*/
-ms动画:fadein 10s;/*Internet Explorer*/
-o-动画:fadein 10s;/*Opera<12.1*/
动画:Fadein10s;
}
@关键帧淡入淡出{
从{opacity:0;}
到{opacity:1;}
}
/*Firefox<16*/
@-moz关键帧fadein{
从{opacity:0;}
到{opacity:1;}
}
/*Safari、Chrome和Opera>12.1*/
@-webkit关键帧fadein{
从{opacity:0;}
到{opacity:1;}
}
/*Internet Explorer*/
@-ms关键帧fadein{
从{opacity:0;}
到{opacity:1;}
}
/*歌剧<12.1*/
@-o-关键帧fadein{
从{opacity:0;}
到{opacity:1;}
}
```
“知识本身是一种美德,是一种美德,是一种美德,是一种美德,是一种美德,是一种美德,是一种美德,是一种美德,是一种美德,是一种美德。”有时,如果你不自以为是,就必须为自己的行为负责。”
```{r设置,include=FALSE}
knitr::opts_chunk$set(echo=TRUE)
图书馆(tidyverse)
图书馆(高级特许)
```
#散例
```{r,results='asis'}
x可能希望查看R中的Scrollama文档,而不是us JS。这只是一个模型,目的是让用户知道高亮显示的部分只有在用户滚动到该部分时才会出现

    ---
title: "Scrollama Document"
output: rolldown::scrollama
---

```{css, echo=FALSE}
.level1 {
  min-height: 400px;
  border: 1px solid;
  margin-bottom: 4em;
  padding: 1em 2em 2em;
}
.is-active {
  background-color: yellow;
}
body {
  margin-bottom: 80vh;
}
```


# Introduction



## Level-two heading

Level-two and below headings...

### Level-three

...are all contained in the same section.


# Text

Example text.


# Plots

You may include any number of plots in a section.

```{r}
par(mar = c(4, 4, .5, .1))
plot(cars, pch = 19)
plot(pressure, type = 'h')
```


# Images

Local news [reported](https://www.desmoinesregister.com/story/news/2018/04/27/rubber-duck-des-moines-yess-duck-derby/558852002/) a      giant     inflatable rubber duck rolling down the street of Des Moines, where this package is conceived.

![The Rolling Duck](https://user-images.githubusercontent.com/163582/60457872-c164ff00-9c02-11e9-8d0f-cdae566b75ed.jpeg)


# Setup

You should call `rolldown::scrollama_setup()` at the end of a document. Turn off the `debug` option to get rid of the horizontal        line on     the page, and you probably also want `echo=FALSE` on this code chunk:

```{r}
rolldown::scrollama_setup(
  list(step = '.level1', offset = .2, debug = TRUE)
)
```
    ---
title: "Scrollama Document"
output: rolldown::scrollama
---

```{css, echo=FALSE}
.level1 {
  min-height: 400px;
  border: 1px solid;
  margin-bottom: 4em;
  padding: 1em 2em 2em;
}
.is-active {
  background-color: yellow;
}
body {
  margin-bottom: 80vh;
}
```


# Introduction



## Level-two heading

Level-two and below headings...

### Level-three

...are all contained in the same section.


# Text

Example text.


# Plots

You may include any number of plots in a section.

```{r}
par(mar = c(4, 4, .5, .1))
plot(cars, pch = 19)
plot(pressure, type = 'h')
```


# Images

Local news [reported](https://www.desmoinesregister.com/story/news/2018/04/27/rubber-duck-des-moines-yess-duck-derby/558852002/) a      giant     inflatable rubber duck rolling down the street of Des Moines, where this package is conceived.

![The Rolling Duck](https://user-images.githubusercontent.com/163582/60457872-c164ff00-9c02-11e9-8d0f-cdae566b75ed.jpeg)


# Setup

You should call `rolldown::scrollama_setup()` at the end of a document. Turn off the `debug` option to get rid of the horizontal        line on     the page, and you probably also want `echo=FALSE` on this code chunk:

```{r}
rolldown::scrollama_setup(
  list(step = '.level1', offset = .2, debug = TRUE)
)
```