import QtQuick 2.11
import QtQuick.Controls 2.4
Rectangle
{
    width:640
    height:480
    color:"#cfcfc0"
    anchors.margins: 6
    property bool load1: true
    Button
    {
        id:button
        text: "Button"
        anchors.horizontalCenter: parent.horizontalCenter
        onClicked:
        {
            if(area.visible)
                fadeOut.start()
            else
                fadeIn.start()
        }
    }
    PropertyAnimation
    {
        id: fadeOut
        target: area
        duration: 300
        property: "opacity"
        from: 1.0
        to: 0.0
        onStopped: area.visible = false
    }
    PropertyAnimation
    {
        id: fadeIn
        target: area
        duration: 300
        property: "opacity"
        from: 0.0
        to: 1.0
        onStarted: area.visible = true
    }
    Rectangle
    {
        id: area
        width: parent.width - 12
        height: parent.height - button.height - 12
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.topMargin: 6
        anchors.top: button.bottom
        visible: false
        color: "#9900ff00"
    }
}