Using HostComponent as target for effect in skin file

Question

Hi,
I am creating a collapsible panel. I have the component file and a skin file.
I have declared collapsed and normal states in my skin file.
when the state change happens i need to show some animation, so used the transition effects. as below.
<s:transitions>
      <s:Transition fromState="*" toState="collapsed">
         <s:Parallel duration="250" target="{hostComponent}">
            <s:Resize heightTo="{hostComponent.collapsedHeight}" />
         </s:Parallel>
      </s:Transition>
      <s:Transition fromState="*" toState="normal">
         <s:Parallel duration="250" target="{hostComponent}">
            <s:Resize heightTo="{hostComponent.expandedHeight}" />
         </s:Parallel>
      </s:Transition>
</s:transitions>
Everything works fine with this.
someone suggested me that using hostComponent as target for the effect is not a good practice? are ther any disadvantages of this.
I tried setting one of the group as target for the effect but that only resizes the particular group and not entire component. if i set the skin as target i.e. "this", still the component doesnot resize.
any suggestions?

Answer 1

Hi,
I am creating a collapsible panel. I have the component file and a skin file.
I have declared collapsed and normal states in my skin file.
when the state change happens i need to show some animation, so used the transition effects. as below.
<s:transitions>
      <s:Transition fromState="*" toState="collapsed">
         <s:Parallel duration="250" target="{hostComponent}">
            <s:Resize heightTo="{hostComponent.collapsedHeight}" />
         </s:Parallel>
      </s:Transition>
      <s:Transition fromState="*" toState="normal">
         <s:Parallel duration="250" target="{hostComponent}">
            <s:Resize heightTo="{hostComponent.expandedHeight}" />
         </s:Parallel>
      </s:Transition>
</s:transitions>
Everything works fine with this.
someone suggested me that using hostComponent as target for the effect is not a good practice? are ther any disadvantages of this.
I tried setting one of the group as target for the effect but that only resizes the particular group and not entire component. if i set the skin as target i.e. "this", still the component doesnot resize.
any suggestions?