Property changes

[qcoderpro]

Hi all,

Please take a look at the last paragraph of this section where it says:
You could play around with this UI by, for example, scaling the inactive light down to highlight the active light. For this, you would need to add another property change for scaling to the states and also handle the animation for the scaling property in the transition.

For that particular part, I've used the code below which looks/works fine. My question is to know if it meets the criteria stated in the above part of the paragraph.

...

state: "stop"

states: [
              State {
                  name: "stop"
                  PropertyChanges { target: light1; color: root.red }
                  PropertyChanges { target: light2; color: root.black }
                  PropertyChanges { target: light1; scale: 1 }
                  PropertyChanges { target: light2; scale: 0.5 }

              },
              State {
                  name: "go"
                  PropertyChanges { target: light1; color: root.black }
                  PropertyChanges { target: light2; color: root.green }
                  PropertyChanges { target: light1; scale: 0.5 }
                  PropertyChanges { target: light2; scale: 1 }
              }
          ]

          MouseArea {
                anchors.fill: parent
                onClicked: parent.state = (parent.state == "stop" ? "go" : "stop")
            }
          transitions: [
              Transition {
                 // from: "*"; to: "*"
                  ColorAnimation { target: light1; properties: "color"; duration: 2000 }
                  ColorAnimation { target: light2; properties: "color"; duration: 2000 }
                  PropertyAnimation {target: light1; property: "scale"; duration: 2000 }
                  PropertyAnimation {target: light2; property: "scale"; duration: 2000 }
              }
          ]

I don't know why the code has greened out! :(