QML实现渐变侧滑效果——显示和隐藏

当看到一个博文，用一个NumberAnimation实现QML实现渐变侧滑效果，从右往左出现的时候，我就想：要实现一个从右往左出现，动画结束后，点击鼠标，又从左往右隐藏。这样的时候，就可以实现一个侧边的面板，响应鼠标（或者键盘）事件，出现或者隐藏。

test.qml代码：

import QtQuick 2.0

Rectangle {
   
   
    id: root
    width: 300
    height: 500

    property bool bShowFull: false

    Rectangle {
   
   
        id: rect
        width: 200; height: parent.height
        color: "red"
    }

    NumberAnimation {
   
   
        id: animIn
        running: true
        target: rect;
        property