Bubble Card 项目中子按钮动画效果实现技巧

问题背景

在使用 Bubble Card 项目创建自定义按钮卡片时，开发者发现当尝试为子按钮图标添加条件动画效果时，必须重复编写相同的 CSS 样式代码才能使其正常工作。具体表现为：需要重复定义颜色样式才能让动画效果生效。

现象描述

开发者希望实现一个子按钮图标，当传感器状态为"1"时显示绿色并带有摇摆动画，否则显示红色且无动画。初始实现方式如下：

.bubble-sub-button-2 > ha-icon {
  color: ${hass.states['sensor.tumble_dryer_mode'].state === '1' ? 'green' : 'red'} !important;
  animation: ${hass.states['sensor.tumble_dryer_mode'].state === '1' ? 'rock-back-forth 2.5s ease-in-out infinite' : ''} !important;
}

但发现这种写法无法正常工作，必须将颜色定义单独重复一次才能生效：

.bubble-sub-button-2 > ha-icon {
  color: ${hass.states['sensor.tumble_dryer_mode'].state === '1' ? 'green' : 'red'} !important;
}

.bubble-sub-button-2 > ha-icon {
  color: ${hass.states['sensor.tumble_dryer_mode'].state === '1' ? 'green' : 'red'} !important;
  animation: ${hass.states['sensor.tumble_dryer_mode'].state === '1' ? 'rock-back-forth 2.5s ease-in-out infinite' : ''} !important;
}

问题根源

经过分析，这个问题并非 Bubble Card 本身的 bug，而是 CSS 样式应用顺序的问题。开发者同时使用了两种动态修改元素的方式：

1. 通过 CSS 样式修改颜色和动画
2. 通过 JavaScript 动态设置图标属性

${subButtonIcon[1].setAttribute("icon", hass.states['sensor.tumble_dryer_mode'].state === '1' ? 'mdi:tumble-dryer' : 'mdi:tumble-dryer-off')}

当 JavaScript 代码在 CSS 样式之前执行时，可能会导致样式应用被覆盖或失效。

解决方案

正确的做法是调整代码顺序，确保所有样式定义在 JavaScript 动态修改之后执行。将 JavaScript 代码移动到样式定义之前即可解决问题：

${subButtonIcon[1].setAttribute("icon", hass.states['sensor.tumble_dryer_mode'].state === '1' ? 'mdi:tumble-dryer' : 'mdi:tumble-dryer-off')}

.bubble-sub-button-2 > ha-icon {
  color: ${hass.states['sensor.tumble_dryer_mode'].state === '1' ? 'green' : 'red'} !important;
  animation: ${hass.states['sensor.tumble_dryer_mode'].state === '1' ? 'rock-back-forth 2.5s ease-in-out infinite' : ''} !important;
}

技术要点

1. 执行顺序重要性：在自定义卡片开发中，代码执行顺序会直接影响最终效果。JavaScript 动态修改和 CSS 样式应用之间的顺序需要特别注意。

2. CSS 特殊性：即使使用了 !important 标记，执行顺序仍然会影响样式的最终应用效果。

3. 动画定义：摇摆动画使用了 CSS 的 @keyframes 规则，通过在不同百分比设置不同的旋转角度实现摇摆效果：

@keyframes rock-back-forth {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-15deg); }
  75% { transform: rotate(15deg); }
}

最佳实践建议

1. 将所有的 JavaScript 动态修改代码集中放在样式定义之前
2. 避免重复定义相同的样式属性
3. 使用注释明确区分不同功能的代码块
4. 测试不同状态下的样式表现，确保条件逻辑正确

通过理解代码执行顺序的重要性，开发者可以更高效地实现复杂的动态效果，而无需依赖重复代码这种变通方案。