如何在单击子小部件中的按钮时更改父小部件的动画？

<div id="parent-widget">
  <div id="child-widget">
    <button id="button">点击按钮</button>
  </div>
</div>

#parent-widget {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  transition: background-color 0.5s;
}

#child-widget {
  width: 100px;
  height: 100px;
  background-color: #f00;
}

#button {
  width: 80px;
  height: 30px;
  background-color: #00f;
  color: #fff;
}

var parentWidget = document.getElementById('parent-widget');
var button = document.getElementById('button');

button.addEventListener('click', function() {
  parentWidget.style.backgroundColor = '#f00';
});