时间戳

首页 > 解决方案 > 你能淡入（动画）R Markdown文档的部分吗

r - 你能淡入（动画）R Markdown文档的部分吗

问题描述

有没有办法让 R Markdown 文档的每个部分仅在用户到达它时才加载？

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

我认为这与创建自定义 CSS 有关吗？我基本上希望用户滚动到该部分后加载该部分。

下面是一个可重复的例子，说明我到目前为止所到之处。如果您看到 tabset 2，动画会导致图表淡入，但由于元素已经加载，图表上没有动画（即重新加载线条）。

    ---
title: "Minimal example"
output:
  html_document:
    toc: true
    toc_float:
      collapsed: false
      smooth_scroll: true
---


```{r, echo = FALSE}
aniview::use_aniview()
```


```{css, echo=FALSE}
p {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;

    -webkit-animation: fadein 10s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 10s; /* Firefox < 16 */
        -ms-animation: fadein 10s; /* Internet Explorer */
         -o-animation: fadein 10s; /* Opera < 12.1 */
            animation: fadein 10s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
```

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(tidyverse)
library(highcharter)

```


# scatter example

```{r, results='asis'}

x <- runif(10, 0, 10)
y <- runif(10, 0, 10)
data <- data.frame(x, y)
hc <- data %>% 
  hchart('scatter', hcaes(x = x, y = y))
hc

```

# line example

```{r, results='asis'}

x <- runif(10, 0, 10)
y <- runif(10, 0, 10)
data <- data.frame(x, y)
hc <- data %>% 
  hchart('line', hcaes(x = x, y = y))
hc

```
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

# Tabsets {.tabset .tabset-fade .tabset-pills}

## 1
```{r, results = 'asis'}
hc
```


## 2
::: {.aniview data-av-animation="slideInUp"}
```{r, results = 'asis'}
hc
```
:::

#  outside tabset


```{r, results = 'asis'}
x <- runif(10, 0, 10)
y <- runif(10, 0, 10)
data <- data.frame(x, y)
hc <- data %>% 
  hchart('scatter', hcaes(x = x, y = y))
hc
```
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

标签： rr-markdown

解决方案

可能想查看 我们 JS 的 R 中的Scrollama 文档。这只是一个模型，以使突出显示的部分仅在用户滚动到该部分时出现。

    ---
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)
)
```

推荐阅读