在闪亮的应用程序中使用动画效果更改 html答案

【问题标题】：Change html with an animation effect in a shiny app在闪亮的应用程序中使用动画效果更改 html
【发布时间】：2023-01-26 07:41:28
【问题描述】：

我有一个带有一些 ui 元素的闪亮应用程序。有没有办法用动画效果替换一些 HTML（例如 div / div 内容），类似于 shinyjs::show(anim=T) 所做的？

library(shiny)
library(shinyjs)

ui <- fluidPage(
  shinyjs::useShinyjs(),
  
  actionButton("change","change"),
  tags$div(id="someDiv",
           "test"),
  
  hidden(tags$div(id="withAnim", "Displayed with animation"))
  
)

server <- function(input, output) {

  observeEvent(input$change, {
    shinyjs::html("someDiv", "changed without animation")
    shinyjs::delay(1000, show("withAnim", anim=T, animType="fade"))
  })
 
}

shinyApp(ui = ui, server = server)

【问题讨论】：

标签： r shiny shinyjs

【解决方案1】：

shinyjs::html 不提供此实用程序。我们可以编写自己的js代码并使用shinyjs::runjs在点击按钮时运行它。

library(shiny)
library(shinyjs)

ui <- fluidPage(
  shinyjs::useShinyjs(),
  
  actionButton("change","change"),
  tags$div(id="someDiv",
           "test"),
  
  hidden(tags$div(id="withAnim", "Displayed with animation"))
  
)

server <- function(input, output) {
  
  observeEvent(input$change, {
    shinyjs::runjs("$('#someDiv').fadeOut(500, function(){$(this).text('changed without animation').fadeIn();})")
    shinyjs::delay(1000, show("withAnim", anim=T, animType="fade"))
  })
  
}

shinyApp(ui = ui, server = server)

【讨论】：