Shiny中pickerInput点击箭头翻转动画实现求助

你的问题出在两个关键点：一是错误地给整个按钮应用旋转效果，而非单独针对箭头元素；二是状态类匹配错误——shinyWidgets的pickerInput展开时，按钮的父容器会自动添加.open类，而非你用的.collapsed。下面是修正后的代码，仅保留箭头翻转动画，完全保留原生pickerInput的默认样式：

fluidRow(
  tags$head(
    tags$style(
      "
      /* 给picker的箭头元素添加过渡动画 */
      .brand-picker .dropdown-toggle .caret {
        transition: transform 0.2s ease-in-out;
      }
      
      /* 当picker展开时，箭头旋转180度 */
      .brand-picker.open .dropdown-toggle .caret {
        transform: rotate(180deg);
      }
      "
    )
  ),
  column(4, tags$div(
    shinyWidgets::pickerInput(
      inputId = "brand", "Brand", 
      choices = unique(df1$Brand), 
      selected = "Kanzler",
      options = list(`actions-box` = TRUE),
      multiple = T), 
    class = "brand-picker"
  ))
)

核心修正点： #

• 直接定位到picker内部的箭头元素.dropdown-toggle .caret，避免修改按钮整体样式
• 利用picker展开时父容器自动添加的.open类来触发箭头旋转
• 仅保留箭头的过渡动画和旋转规则，完全不改动picker的默认外观

内容的提问来源于stack exchange，提问作者Muhammad Rafif