In this task, you will add a transition that will be applied when a view state within a component is displayed. In this case, you will add the transition when the user rolls over the food item to display the details.
1.
Open GroceryDetail.mxml in views/ecomm.
The file is located in your flexGrocer/views/ecomm directory. If you skipped Lesson 18, when this version was created, you can open this file from Lesson22/start/views/ecomm and save it in your flexGrocer/views/ecomm directory.
This is the component that contains all the view states that are displayed when the user rolls over a food item.
2.
Below the <mx:Script> tag, add an <mx:transitions> tag block. Inside of that tag, nest an <mx:Transition> tag block. Assign the <mx:Transition> tag an id of foodTransition. Specify the fromState attribute as an asterisk (*) and the toState attribute as an asterisk (*). Your code should appear as follows:
The fromState is simply a string that specifies the view state that you are changing from when the transition is applied. In this case, you specify an asterisk (*) which means any view state. The toState is a string that specifies the view state that you are changing to when the transition is applied. In this case, you specify an asterisk (*), which means any view state.
3.
Within the <mx:Transition> tag block, nest an <mx:WipeRight> effect and specify the duration property as 500. Also, add the target to be bound to foodBox.
Remember that the <mx:Transition> tag defines the effects that make up a transition. You can specify the duration of the WipeRight effect so the text will gradually "roll in" when the end user rolls over the appropriate grocery item.
4.
Locate the <mx:VBox> tag in the <mx:AddChild> tag in the expanded view state. Give this VBox an id set equal to foodBox.