Ajax Control Toolkit Animation 想说爱你不容易

Ajax control Toolkit Animation效果很酷,可以节省我们很多的开发时间。但是昨天发现了Animation缺乏灵活性的一点,这让我们一度陷入被动.
 下面是示例代码里面的一段:
 
< ajaxToolkit:AnimationExtender  id ="OpenAnimation"  runat ="server"  TargetControlID ="btnInfo" >
            
< Animations >
                
< OnClick >
                    
< Sequence >
                        
<% -- Disable the button so it can't be clicked again --%>
                        <EnableAction Enabled="false" />
                        
                        
<%-- Position the wire frame on top of the button and show it --
%>
                        
< ScriptAction  Script ="Cover($get('ctl00_SampleContent_btnInfo'), $get('flyout'));"   />
                        
<StyleAction AnimationTarget="flyout" Attribute="display" Value="block"/>
                        
                        
<%-- Move the wire frame from the button's bounds to the info panel's bounds --%>
                        
<Parallel AnimationTarget="flyout" Duration=".3" Fps="25">
                            
<Move Horizontal="150" Vertical="-50" />
                            
<Resize Width="260" Height="280" />
                            
<Color PropertyKey="backgroundColor" StartValue="#AAAAAA" EndValue="#FFFFFF" />
                        
</Parallel>
                        
                        
<%-- Move the info panel on top of the wire frame, fade it in, and hide the frame --%>
                        
<ScriptAction Script="Cover($get('flyout'), $get('info'), true);" />
                        
<StyleAction AnimationTarget="info" Attribute="display" Value="block"/>
                        
<FadeIn AnimationTarget="info" Duration=".2"/>
                        
<StyleAction AnimationTarget="flyout" Attribute="display" Value="none"/>
                        
                        
<%-- Flash the text/border red and fade in the "close" button --%>
                        
<Parallel AnimationTarget="info" Duration=".5">
                            
<Color PropertyKey="color" StartValue="#666666" EndValue="#FF0000" />
                            
<Color PropertyKey="borderColor" StartValue="#666666" EndValue="#FF0000" />
                        
</Parallel>
                        
<Parallel AnimationTarget="info" Duration=".5">
                            
<Color PropertyKey="color" StartValue="#FF0000" EndValue="#666666" />
                            
<Color PropertyKey="borderColor" StartValue="#FF0000" EndValue="#666666" />
                            
<FadeIn AnimationTarget="btnCloseParent" MaximumOpacity=".9" />
                        
</Parallel>
                    
</Sequence>
                
</OnClick>
            
</Animations>
        
</ajaxToolkit:AnimationExtender>
 我们注意一下Move效果,现在Horizontal  Vertical的偏移量都是固定值,我们当然希望可以用一个灵活的方式来设定这个值,最简单的:
             
function a()
            
return 200;}
            然后修改代码 
<Move Horizontal="return a();" Vertical="-50" />,运行,页面报错:参数无效
  同样的问题出现在了Resize上面,查看页面源代码:
  [
{\"AnimationName\":\"Move\",\"Horizontal\":\"return a();\",\"Vertical\":\"-50\",\"AnimationChildren\":[]},{\"AnimationName\":\"Resize\",\"Width\":\"260\",\"Height\":\"280\",\"AnimationChildren\":[]},
 这个问题让Ajax Control toolkit Animation的可用性大大降低,有多少东西是一成不变的呢???
            
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值