UpdatePanel的肠子元素的动画

我有一个UpdatePanel与它的元素数量和AnimationExtender：UpdatePanel的肠子元素的动画

<asp:UpdatePanel ID="updPan2" UpdateMode="Conditional" runat="server"> 
    <ContentTemplate> 
    <div> 
    <table> 
     <tr> 
     <td><div id="lblText1" runat="server">Text 1</div></td> 
     <td><asp:LinkButton ID="lnkButton1" Text="Click" runat="server" OnClick="lnkButton1_Click" /></td> 
     </tr> 
     <tr> 
     <td><div id="lblText2" runat="server">Text 2</div></td> 
     <td><asp:LinkButton ID="lnkButton2" Text="Click" runat="server" OnClick="lnkButton2_Click" /></td> 
     </tr> 
     <tr> 
     <td><div id="lblText3" runat="server">Text 3</div></td> 
     <td><asp:LinkButton ID="lnkButton3" Text="Click" runat="server" OnClick="lnkButton3_Click" /></td> 
     </tr> 
    </table> 

    <cc1:AnimationExtender ID="AnimationExtender1" TargetControlID="lnkButton1" runat="server"> 
     <Animations> 
     <OnClick> 
      <Color AnimationTarget="lblText1" 
      Duration="5" 
      StartValue="#FF0000" 
      EndValue="#666666" 
      Property="style" 
      PropertyKey="backgroundColor" /> 
     </OnClick> 
     </Animations> 
    </cc1:AnimationExtender>  

    <asp:Button ID="btnSave" Text="Save" runat="server" /> 

    </div> 
    </ContentTemplate> 
</asp:UpdatePanel>

我想做的一两件事。当我lnkButton1那么，元件lblText1应该是动画5秒单击当我点击lnkButton2那么，元件lblText2应该是动画5秒当我点击lnkButton3那么，元件lblText3应该是动画5秒

而且当我点击btnSave时，所有元素（lblText1，lblText2，lblText3）应该一起动画5秒钟。但是，当我将AnimationExtender与OnClick动画一起使用时，即使将持续时间设置为5秒，所有元素的动画效果也少于1秒。我该如何做这样的事情？谢谢。

来源

2009-09-24 msi

我找到了解决这个问题的方法。我已经添加了围绕元素的更新面板。对每个面板使用UpdatePanelAnimationExtender1，并为并行执行中的所有元素使用一个。

这里是解决这个问题的代码。

<asp:UpdatePanel ID="updPan2" UpdateMode="Conditional" runat="server"> 
    <ContentTemplate> 
    <div style="border:solid 1px #000;"> 
    <p> 
     <%= DateTime.Now.ToString("HH:mm:ss") %> 
    </p> 

    <asp:UpdatePanel ID="upP1" UpdateMode="Conditional" runat="server"> 
     <ContentTemplate> 
     <table> 
      <tr> 
      <td><div id="lblText1" runat="server">Text 1</div></td> 
      <td><asp:LinkButton ID="lnkButton1" Text="Click" runat="server" OnClick="lnkButton1_Click" /></td> 
      </tr> 
     </table>   
     </ContentTemplate> 
    </asp:UpdatePanel> 
    <cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" TargetControlID="upP1" runat="server"> 
     <Animations> 
     <OnUpdated> 
      <Color AnimationTarget="lblText1" 
      Duration="2" 
      StartValue="#FF0000" 
      EndValue="#666666" 
      Property="style" 
      PropertyKey="backgroundColor" /> 
     </OnUpdated> 
     </Animations> 
    </cc1:UpdatePanelAnimationExtender> 

    <asp:UpdatePanel ID="upP2" UpdateMode="Conditional" runat="server"> 
     <ContentTemplate> 
     <table> 
      <tr> 
      <td><div id="lblText2" runat="server">Text 2</div></td> 
      <td><asp:LinkButton ID="lnkButton2" Text="Click" runat="server" OnClick="lnkButton2_Click" /></td> 
      </tr> 
     </table>   
     </ContentTemplate> 
    </asp:UpdatePanel> 
    <cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender2" TargetControlID="upP2" runat="server"> 
     <Animations> 
     <OnUpdated> 
      <Color AnimationTarget="lblText2" 
      Duration="2" 
      StartValue="#FF0000" 
      EndValue="#666666" 
      Property="style" 
      PropertyKey="backgroundColor" /> 
     </OnUpdated> 
     </Animations> 
    </cc1:UpdatePanelAnimationExtender> 

    <asp:UpdatePanel ID="upP3" UpdateMode="Conditional" runat="server"> 
     <ContentTemplate> 
     <table> 
      <tr> 
      <td><div id="lblText3" runat="server">Text 3</div></td> 
      <td><asp:LinkButton ID="lnkButton3" Text="Click" runat="server" OnClick="lnkButton3_Click" /></td> 
      </tr> 
     </table>   
     </ContentTemplate> 
    </asp:UpdatePanel> 
    <cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender3" TargetControlID="upP3" runat="server"> 
     <Animations> 
     <OnUpdated> 
      <Color AnimationTarget="lblText3" 
      Duration="2" 
      StartValue="#FF0000" 
      EndValue="#666666" 
      Property="style" 
      PropertyKey="backgroundColor" /> 
     </OnUpdated> 
     </Animations> 
    </cc1:UpdatePanelAnimationExtender> 


    <asp:Button ID="btnSave" Text="Save" runat="server" /> 

    </div> 
    </ContentTemplate> 
</asp:UpdatePanel> 

<cc1:UpdatePanelAnimationExtender ID="upaPan1" TargetControlID="updPan2" runat="server"> 
    <Animations> 
    <OnUpdated> 
     <Parallel> 
     <Color AnimationTarget="lblText1" 
      Duration="2" 
      StartValue="#FF0000" 
      EndValue="#666666" 
      Property="style" 
      PropertyKey="backgroundColor" /> 
     <Color AnimationTarget="lblText2" 
      Duration="2" 
      StartValue="#FF0000" 
      EndValue="#666666" 
      Property="style" 
      PropertyKey="backgroundColor" /> 
     <Color AnimationTarget="lblText3" 
      Duration="2" 
      StartValue="#FF0000" 
      EndValue="#666666" 
      Property="style" 
      PropertyKey="backgroundColor" /> 
     </Parallel> 
    </OnUpdated> 
    </Animations> 
</cc1:UpdatePanelAnimationExtender>

来源

2009-09-24 08:51:29 msi

UpdatePanel的肠子元素的动画

回答

相关问题