sequential animation on property change

RobM

I am attempting to run a Sequential Animation whenever the optionsListEnabled property changes:

property int maxHeight: 100
property bool optionsListEnabled: modelData.enabled

onOptionsListEnabledChanged: heightChange.start()
SequentialAnimation
{
  id: heightChange

    NumberAnimation
    {
        from: statusIconButton.implicitHeight
        to: statusIconButton.maxHeight
        easing.type: Easing.OutExpo
        duration: 300
    }

    NumberAnimation
    {
	from: statusIconButton.maxHeight
	to: statusIconButton.implicitHeight
	easing.type: Easing.OutBounce
	duration: 300
    }
}

however, I can't figure out how to make statusIconButton.impliciteHeight be the target. In other words I am trying to toggle the implicitHeight of the button to change whenever the property changes. I tried this:

SequentialAnimation on implicitHeight

but that causes it to change both when the property changes, and on startup of the application when implicitHeight is being set which is not what I am looking for. Any suggestions?

GrecKo

Add

target: yourItem
property: "implicitHeight"

in your NumberAnimations.

Note that instead of

onOptionsListEnabledChanged: heightChange.start()
SequentialAnimation {
    id: heightChange
    //...
}

You can do

Behavior on optionsListEnabled {
    SequentialAnimation {
        //...
    }
}