Color animation

[RobM]

I have setup a mouseArea for this Item delegate and I want the Rectangle (keyboardCardImageContainer) sibling of the delegate to make a color transition whenever the mouseArea's onClicked signal fires. How might I do that?

        delegate: Item
        {

          //Notify itemSelected that the user has made a decision
          MouseArea
          {
            height: keyboardCardIDContainer.height + keyboardCardImageContainer.height
            width: keyboardCardIDContainer.width
            onClicked: 
                            {
                              //Here is where I want the animation to take place
                              //I imagine it would be something like:
                              //keyboardCardImageContainer.animation = true
                              //or something along those lines?
                              gridViewContainer.itemSelected(index)
                            }
          }
          Rectangle
          {
            id: keyboardCardIDContainer
            width: 250
            anchors.horizontalCenter: keyboardCardImageContainer.horizontalCenter
            height: keyboardCardID.height
            color: "#d7d7d7"
            TextStyled
            {
              id: keyboardCardID
              font.bold: true
              font.pixelSize: 18
              anchors.centerIn: parent
              elide: Text.ElideMiddle
              text: gridView.imageList[index]
            }
          }
          Rectangle
          {
            id: keyboardCardImageContainer
            height: 250
            width: 250
            radius: 5
            anchors.top: keyboardCardIDContainer.bottom
            color: "lightsteelblue"
            Image
            {
              id: keyboardCardImage
              anchors.centerIn: parent
              source: modelData
            }
          }
        }

[Jkimmy]

Check out https://doc.qt.io/qt-5/qml-qtquick-coloranimation.html and https://doc.qt.io/qt-5/qml-qtquick-propertyanimation.html.

[Markkyboy]

    MouseArea {
        height: keyboardCardIDContainer.height + keyboardCardImageContainer.height
        width: keyboardCardIDContainer.width
        onClicked: {

            keyboardCardIDContainer.color = Qt.hsla(Math.random(), 0.5, 0.5, 1.0);

            gridViewContainer.itemSelected(index)
        }
    }