如何使用样式化组件制作tranistion颜色字体

Question

我对带有样式组件的动画有疑问。 我想用“动画”显示1秒后的文本。

这是我对组件的声明”

export const UserOption = styled.li`
  color: white;
  transition: color 1s;
  ${props =>
    props.expanded &&
    css`
      color: black;
    `};
`;

它使用Component返回“

<UserOption expanded>Profil</UserOption>

我使用javascript vanilla创建了此动画：

const a = document.querySelector('.first')
const b = document.querySelectorAll('.listItem')
const modifyText = () => {
  console.log("we")
  b.forEach(w => w.classList.toggle('add'))
}
a.addEventListener("click", modifyText, true); 

css：

.listItem{
  color:white;
  transition:color 2s;
}
.add{
  color:black;
}

如何使用样式化组件