如何让bsCollapsePanel初始展开时三角图标旋转效果即时生效？

原代码的问题出在CSS选择逻辑错误，错误地给初始打开状态的面板图标添加了旋转效果，导致初始显示异常，且过渡效果需要手动切换一次才会激活。以下是纯UI层面的修复方案：

library(shiny)
library(bslib)

ui <- fluidPage(
  column(3,
    tags$head(
      tags$style(HTML("
        /* 默认打开状态的图标样式：向下三角，无旋转 */
        .panel-heading .panel-title a:after {
          content:'▽';
          text-align: right;
          float:right;
          transition: .5s ease-in-out;
          transform: rotate(0deg); /* 明确初始状态，确保过渡触发 */
        }
        /* 关闭状态的图标样式：旋转90度变为向右三角 */
        .panel-heading .panel-title a.collapsed:after {
          transform: rotate(90deg);
        }
      "))
    ),
    bsCollapse(
      id = "tag_panel",
      open = 1,
      bsCollapsePanel(
        value = 1,
        "Title",
        p("content")
      )
    )
  )
)

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

shinyApp(ui, server)

关键修改说明 #

• 移除了原代码中错误的.panel-heading .panel-title a:not([class]):after规则，该规则会强制旋转初始打开状态的图标，导致显示异常
• 给打开状态的图标明确设置transform: rotate(0deg)，与关闭状态的rotate(90deg)形成清晰的属性差异，保证第一次切换状态时过渡动画正常生效
• 简化CSS逻辑，让打开/关闭状态的图标样式切换更直观，过渡动画在两种状态切换时自动触发

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