How to change delegate's property during transition - qt

Question

I try to change property "opacity" in delegate (Rectangle as delegate), but get ReferenceError: rectDelegate is not defined.
How do I refer to the desired model index in the delegate to change the property?
Item {
id: root
QtObject {
id: internal;property int rectHeight: 16 * 3
}
GridView {
id: grid
model: 12; anchors.centerIn: parent; height: internal.rectHeight * 2; width: internal.rectHeight * 6
cellWidth: internal.rectHeight; cellHeight: internal.rectHeight
delegate: Rectangle {
id: rectDelegate
color: "green"
opacity: {
switch (index) {
case 0:
case 2:
case 5:
return 1
case 6:
...
}
}
width: internal.rectHeight
height: internal.rectHeight
}
}
states: [
State {
name: "first"
PropertyChanges {
target: rectDelegate
opacity: {
switch (rectDelegate.index) {
case 0:
...
}
}
}
},
State {
name: "second"
PropertyChanges {
target: rectDelegate
opacity: {
switch (rectDelegate.index) {
case 0:
...
}
}
}
}
]
transitions: [
Transition {
from: "first"
to: "second"
PropertyAnimation {...}
},
Transition {
from: "second"
to: "first"
PropertyAnimation {...}
}
]
Timer {
...
onTriggered: {rectDelegate.state = "second"}
}
}

Answer 1

Avoid using JS-code (and switchs) in QML as much as possible. The more declarative code you have - the better.
Try to move values for opacities of your delegates to array in internal.
Here is fixed & 'compilable' code (with my additions in places where ... was)
import QtQuick 2.12
import QtQuick.Controls 2.5
ApplicationWindow {
id: window
visible: true
width: 640
height: 480
title: qsTr("Stack")
Item {
id: root
state: "first"
QtObject {
id: internal;
property int rectHeight: 16 * 3
property var opacities: [0.7, 1, 1, 0.5, 1, 1, 0.7, 1, 1, 0.5, 1, 1]
}
GridView {
id: grid
model: 12; anchors.centerIn: parent; height: internal.rectHeight * 2; width: internal.rectHeight * 6
cellWidth: internal.rectHeight; cellHeight: internal.rectHeight
delegate: Rectangle {
id: rectDelegate
color: "green"
opacity: internal.opacities[index]
Behavior on opacity { NumberAnimation { duration: 1000 } }
width: internal.rectHeight
height: internal.rectHeight
}
}
states: [
State {
name: "first"
PropertyChanges {
target: internal
opacities: [0.7, 1, 1, 0.5, 1, 1, 0.7, 1, 1, 0.5, 1, 1]
}
},
State {
name: "second"
PropertyChanges {
target: internal
opacities: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}
}
]
}
Timer {
interval: 2000
running: true
repeat: false
onTriggered: root.state = "second";
}
}