QmlDesigner: Update the Animated State Transitions doc

This patch updates the Animated State Transitions document.
Removes an old image and adds a new image to support
the current connection view update. Also, changes some texts
to keep the process relevant.

Fixes: QDS-11055
Change-Id: I4ea3face56df6cec05adfd8244d32dc20d7e6e16
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>

doc/qtdesignstudio/examples/doc/StateTransitions.qdoc

@@ -123,16 +123,19 @@
     \list 1
       \li Go to the \uicontrol Connections view.
       \li In \uicontrol{Navigator}, select \e button_side and in
-      \uicontrol {Connections}, select \inlineimage icons/plus.png
+          \uicontrol {Connections}, select the \inlineimage icons/plus.png
-      .
+          button to open the connection setup options.
-      This creates a new connection with \e button_side as the target.
+      \li Set \uicontrol Signal to \c clicked, \uicontrol Action to
-      \li Set \uicontrol{Signal Handler} to \uicontrol onClicked.
+            \c {Change State}, \uicontrol {State Group} to \c rectangle and
-      \li Set \uicontrol Actions to \e {Change state to side}.
+            \uicontrol State to \c side in the respective
+            drop-down menus.
+      \li Select the \inlineimage icons/close.png
+            button to close the connection setup options.
       \li Repeat steps 2 to 4 for the next three buttons and set them to go to
       their corresponding states.
     \endlist
 
-    \image state-transition-connections.png
+    \image state-transition-connections.webp
 
     Now you can preview and try the transitions to see how the UI moves between
     the states when you select the buttons.