Environment Information

• Package version(s): 7.153.2
• Browser and OS versions: Chrome (latest) and Edge (dev on ubuntu)

Please provide a reproduction of the bug in a codepen:

Actual behavior:

Transition for color of *Button components is delayed

This shows exactly what happend.

Assume:

* {
	transition: color 0.2s
}

<CommandBarButton
	iconProps={{ iconName: 'Upload' }}
	text="Upload"
	disabled={this.state.readonly} />

When state.readonly become true, both color of text and icon become gray, but transition for color of text is delayed than icon.

Expected behavior:

Transition for color of *Button components is not delayed

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No): Sorry it's very hard to understand how styles property works. It would be nice tell me where the document is.

Requested priority: (Blocking, High, Normal, Low)

Products/sites affected: (if applicable)