Element Plus’s transitions are classes in its stylesheet, for Vue’s
<transition> inside a component’s markup. In R that
markup is el_widget()’s: here each demo is a small
component of its own, its state in data, with Element
Plus’s buttons as el$ tags.
Fade
Two fading effects: el-fade-in-linear and
el-fade-in.
box <- function(text) {
htmltools::tags$div(
`v-show` = "show",
class = "transition-box",
style = "margin: 12px 20px 0 0; width: 200px; height: 100px; border-radius: 4px;
background: var(--el-color-primary); color: #fff; text-align: center;
line-height: 100px; display: inline-block",
text
)
}
el_widget(
"fade",
data = list(show = TRUE),
markup = htmltools::tags$div(
el$button("@click" = "show = !show", "Click Me"),
htmltools::tags$div(
htmltools::tag(
"transition",
list(name = "el-fade-in-linear", box(".el-fade-in-linear"))
),
htmltools::tag(
"transition",
list(name = "el-fade-in", box(".el-fade-in"))
)
)
)
)Zoom
el-zoom-in-center, el-zoom-in-top and
el-zoom-in-bottom.
box <- function(text) {
htmltools::tags$div(
`v-show` = "show",
style = "margin: 12px 20px 0 0; width: 200px; height: 100px; border-radius: 4px;
background: var(--el-color-primary); color: #fff; text-align: center;
line-height: 100px; display: inline-block",
text
)
}
el_widget(
"zoom",
data = list(show = TRUE),
markup = htmltools::tags$div(
el$button("@click" = "show = !show", "Click Me"),
htmltools::tags$div(
htmltools::tag(
"transition",
list(name = "el-zoom-in-center", box(".el-zoom-in-center"))
),
htmltools::tag(
"transition",
list(name = "el-zoom-in-top", box(".el-zoom-in-top"))
),
htmltools::tag(
"transition",
list(name = "el-zoom-in-bottom", box(".el-zoom-in-bottom"))
)
)
)
)Collapse
For a collapse effect, el$collapse_transition(): it
animates a block’s height.
el_widget(
"collapse",
data = list(show = TRUE),
markup = htmltools::tags$div(
el$button("@click" = "show = !show", "Click Me"),
htmltools::tags$div(
style = "margin-top: 20px; height: 200px",
el$collapse_transition(
htmltools::tags$div(
`v-show` = "show",
htmltools::tags$div(
style = "width: 200px; height: 100px; margin-bottom: 10px; border-radius: 4px;
background: var(--el-color-primary); color: #fff; text-align: center; line-height: 100px",
"el-collapse-transition"
),
htmltools::tags$div(
style = "width: 200px; height: 100px; border-radius: 4px;
background: var(--el-color-primary); color: #fff; text-align: center; line-height: 100px",
"el-collapse-transition"
)
)
)
)
)
)