条件面板上的动画

我想在我的条件面板上添加一些动画。我找到了这里提供的解决方案：闪亮条件面板的动画/过渡

我真的很喜欢这个解决方案，但我有一个问题。检查以下示例：

library(shiny)
library(shinyjs)
library(shinydashboard)

ui <- dashboardPage(
  header = dashboardHeader(title = "test"),
  sidebar = dashboardSidebar(),
  shinydashboard::dashboardBody(
    fluidPage(
      useShinyjs(),
      
      tags$head(
        tags$link(rel = "stylesheet", href = "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.compat.min.css"),
        tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/animateCSS/1.2.2/jquery.animatecss.min.js")
      ),
      
      fluidRow(
        textOutput("test"),
        column(2, offset = 2, actionButton("prev_box", "Previous")),
        column(
          4,
          
          # conditionalPanel(condition = "output.phase_box_ui == 0",
          #                  uiOutput("box_move1")),
          # conditionalPanel(condition = "output.phase_box_ui > 0",
          #                  uiOutput("box_move2"))
          

          animatedConditionalPanel(
            condition = "output.phase_box_ui == 0",
            onShow = animateCSS("backInRight", duration = 1000),
            onHide = animateCSS("backOutLeft", duration = 1000),
            fadeIn = 0,
            fadeOut = 0,
            uiOutput("box_move1")
          ),
          animatedConditionalPanel(
            condition = "output.phase_box_ui == 1",
            onShow = animateCSS("backInRight", duration = 1000),
            onHide = animateCSS("backOutLeft", duration = 1000),
            fadeIn = 0,
            fadeOut = 0,
            uiOutput("box_move2")
          )
          
        ),
        column(2, actionButton("next_box", "Next"))
      )
    )
  )
)

server <- function(input, output,session) {

  #### TEST BOX MOVING
  
  phase_box = reactiveVal(0)
  
  observeEvent(phase_box(),{
    if(phase_box() == 0){
      shinyjs::hide("prev_box")
    }else{
      shinyjs::show("prev_box")
    }
  })
  
  
  observeEvent(input$prev_box,{
    if(phase_box() > 0){
      val = phase_box() - 1
      phase_box(val)
    }
  })
  
  observeEvent(input$next_box,{
    if(phase_box() < 6){
      val = phase_box() + 1
      phase_box(val)
    }
  })
  
  output$test = renderText({
    phase_box()
  })
  
  output$phase_box_ui = reactive({return(phase_box())})
  outputOptions(output, "phase_box_ui", suspendWhenHidden = F)
  
  
  
  output$box_move1 = renderUI({
    shinydashboard::infoBox(title = "First box", value = 0, color = "red")

  })
  
  
  output$box_move2 = renderUI({
    shinydashboard::infoBox(title = "Second box", value = 1)
  })
  
}

shinyApp(ui, server)

问题是在启动时，它们都出现一秒钟然后消失，但在启动时第一个框应该是可见的。我该如何修复它？

EDIT:

现在第一个问题已经解决了。不过请检查下面的 gif：

当第二个盒子到达时，它到达第一个盒子的下方，然后突然上升。如果过渡不是立即发生（它只是在正确的位置弹出），效果可能会很好。您知道有解决办法吗？看起来，就在一瞬间（在过渡期间），它们都显示出来，因此第二个框位于第一个框下方。

这是为第二个框的 inShow 过渡添加 1 秒延迟的行为。也许问题更清楚了。

EDIT2:

我在嵌套条件面板上有一个更大的问题。当我将另一个条件面板（一个简单的）放入动画中时，每次触发内部条件时，动画都会再次运行动画。这是一个可重现的示例：

library(shiny)
library(shinyjs)
library(shinydashboard)

ui <- dashboardPage(
  header = dashboardHeader(title = "test"),
  sidebar = dashboardSidebar(),
  shinydashboard::dashboardBody(
    fluidPage(
      useShinyjs(),
      
      tags$head(
        tags$link(rel = "stylesheet", href = "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.compat.min.css"),
        tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/animateCSS/1.2.2/jquery.animatecss.min.js")
      ),
      
      fluidRow(
        textOutput("test"),
        column(2, offset = 2, actionButton("prev_box", "Previous")),
        column(
          4,
          
          animatedConditionalPanel(
            condition = "output.phase_box_ui == 0",
            onShow = animateCSS("backInRight", duration = 1000),
            onHide = animateCSS("backOutLeft", duration = 1000),
            fadeIn = 0,
            fadeOut = 0,
            uiOutput("box_move1")
          ),
          animatedConditionalPanel(
            condition = "output.phase_box_ui == 1",
            onShow = animateCSS("backInRight", duration = 1000),
            onHide = animateCSS("backOutLeft", duration = 1000),
            fadeIn = 0,
            fadeOut = 0,
            uiOutput("box_move2")
          )
          
        ),
        column(2, actionButton("next_box", "Next"))
      )
    )
  )
)

server <- function(input, output,session) {
  
  #### TEST BOX MOVING
  
  phase_box = reactiveVal(0)
  
  observeEvent(phase_box(),{
    if(phase_box() == 0){
      shinyjs::hide("prev_box")
    }else{
      shinyjs::show("prev_box")
    }
  })
  
  
  observeEvent(input$prev_box,{
    if(phase_box() > 0){
      val = phase_box() - 1
      phase_box(val)
    }
  })
  
  observeEvent(input$next_box,{
    if(phase_box() < 6){
      val = phase_box() + 1
      phase_box(val)
    }
  })
  
  output$test = renderText({
    phase_box()
  })
  
  output$phase_box_ui = reactive({return(phase_box())})
  outputOptions(output, "phase_box_ui", suspendWhenHidden = F)
  
  
  
  output$box_move1 = renderUI({
    fluidPage(
      shinydashboard::infoBox(title = "First box", value = 0, color = "red"),
      selectInput("step2", "Choose:", choices = c("one", "two")), br(),
      conditionalPanel(style = "display: none",
        condition = "input.step2 == 'two'",
        h4(strong("2. This is the second step"))
      )
    )
  })
  
  
  output$box_move2 = renderUI({
    shinydashboard::infoBox(title = "Second box", value = 1)
  })
  
}

shinyApp(ui, server)