如何在pickerInput中插入动画,dropdown-menu.open?

50pmv0ei  于 2023-10-13  发布在  其他
关注(0)|答案(2)|浏览(100)

我有这个代码:

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  
  pickerInput(
    inputId = "countryid1",
    label = "Select:",
    choices = c("Brazil", "Argentina", "Colombia", "Paraguay", "Bolivia", "Trinidad and Tobago"),
    selected = "Paraguay"
  )

)

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

shinyApp(ui, server)

我想知道当我点击输入时,是否可以对开口应用slideDown(或fadeInDown)效果,即在.dropdown-menu.open中应用平滑的开口效果,如下所示:

dropdown(
  "Your contents goes here ! You can pass several elements",
  circle = TRUE, status = "danger", icon = icon("gear"), width = "300px",
  animate = animateOptions(enter = "fadeInDown", exit = "fadeOutUp", duration = 1)
)
nfs0ujit

nfs0ujit1#

你也可以只使用CSS动画来实现这一点。即@keyframes规则,指定动画代码。
所以代码看起来像这样

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  
  tags$head(tags$style("
    @keyframes slideDown {
      0% {
        opacity: 0;
        transform: translateY(-20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
  /* Change the slide down animation time if needed  */
    .dropdown-menu.open {
      animation: slideDown 0.5s;
    }
  ")),
  
  pickerInput(
    inputId = "coutryid1",
    label = "Select:",
    choices = c("Brazil", "Argentina", "Colombia", "Paraguay", "Bolivia", "Trinidad and Tobago"),
    selected = "Paraguay"
  )
  
)

server <- function(input, output) {
  
}

shinyApp(ui, server)

也许这也能有所帮助:https://community.rstudio.com/t/how-to-create-a-glowing-or-flickering-actionbutton/42564

dw1jzc5e

dw1jzc5e2#

ShinyShinyWidgets不提供内置的功能,特别是动画pickerInput直接.你可以考虑使用CSS动画或JavaScript库(如jQuery)来补充i,如jQuery slideDown
您需要将自定义JavaScript片段添加到ui.R中:

tags$head(tags$script('
    $(document).ready(function() {
      $("body").on("click", "#coutryid1", function() {
        $(".dropdown-menu").hide();
        $(".dropdown-menu").slideDown(400); // 400ms duration
      });
    });
'))

并将此代码段添加到ui.RfluidPage部分:

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  
  tags$head(tags$script('
      $(document).ready(function() {
        $("body").on("click", "#coutryid1", function() {
          $(".dropdown-menu").hide();
          $(".dropdown-menu").slideDown(400);
        });
      });
  ')),
  
  pickerInput(
    inputId = "coutryid1",
    label = "Select:",
    choices = c("Brazil", "Argentina", "Colombia", "Paraguay", "Bolivia", "Trinidad and Tobago"),
    selected = "Paraguay"
  )

)

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

shinyApp(ui, server)

JavaScript代码监听ID为#coutryid1的选择器输入上的单击事件。单击时,它会隐藏.dropdown-menu,然后在400毫秒内执行slideDown动画。
此示例直接针对所有.dropdown-menu元素,因此它可能会干扰应用程序中的其他菜单。为了使它更具体,您可以自定义jQuery选择器。

相关问题