Transition onRunningChanged only call new.state for specific State name [solved]

dstudentx

I'm using the code below for an animation of a specific mousearea. When the mousearea is clicked the animated is fired and when completed the state1 is called. This works fine but I also have a back mousearea that returns to the previous state (base state) when the back mousearea is clicked the animation is called again but to return the image to its original state. The problem is state1 is called again after the animation is completed.

how can I do something like
@
....
onRunningChanged: if(!running && !"rotated_back") page.state = 'State1'

...@

here is the code which pertains to my issue.

@
Image {id: image6; x: 59; y: 33; width: 100; height: 100; source: "images/mm.png"
states: State {
name: "rotated"
PropertyChanges { target: image6; rotation: 180}
}
State{
name: "rotated_back"
PropertyChanges { target: image6; rotation: 180 }

                   }
            transitions: Transition {
                       RotationAnimation { duration: 1000; direction: RotationAnimation.clockwise }
                       onRunningChanged: if(!running)  page.state = 'State1'
                   }
            }

......

MouseArea {
id: movie_mouse_mm
x: 392
y: 250
width: 104
height: 100
onClicked:{
image6.state = "rotated"
playbanner.start()
//page.state = 'State1'
Logic.get_db(5,0);
}
}
....
MouseArea {id: home_mouse; x: 16; y: 31; width: 75; height: 42;
onClicked:{
page.state = 'base state'
onClicked: image6.state = "rotated_back";
}
}
@

JapieKrekel

Try
@
....
onRunningChanged: if(!running && (image6.state !== "rotated_back")) page.state = 'State1'

...
@

dstudentx

You sir are amazing.