qml转换不适用于自定义工具栏组件

Question

我正在尝试在qml中使用转换自定义工具栏样式组件，我希望根据工具栏状态转换不透明度。代码如下：

Rectangle {
    id: toolbar
    color: "gray"
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    height: 48
    opacity: 0
    property bool on: false

    MouseArea { id: region; anchors.fill: parent; onClicked: toolbar.toggle()}

    function toggle() {
        console.log('toggled')
        on = on == true ? false : true
    }

    states : State {
        name: "shown"
        when: on
        PropertyChanges{
            target:toolbar
            opacity: 1
        }
    }

    transitions: Transition {
        NumberAnimation { property: "opacity"; duration: 500 }
    }            
}

我总是看到toggled消息，但转换永远不会被触发，即我希望工具栏可见但却永远不会发生。