Wyzwalanie animacji w innej kontrolce (C#)
Autor: Christian Wenz
Kontrolka Animacja w zestawie narzędzi ASP.NET AJAX Control Toolkit nie tylko jest kontrolką, ale całą strukturą do dodawania animacji do kontrolki. Ogólnie rzecz biorąc, uruchamianie animacji jest wyzwalane przez interakcję użytkownika z tą samą kontrolką. Istnieje jednak również możliwość interakcji z jedną kontrolką, a następnie animacja innej kontrolki.
Omówienie
Kontrolka Animacja w zestawie narzędzi ASP.NET AJAX Control Toolkit nie tylko jest kontrolką, ale całą strukturą do dodawania animacji do kontrolki. Ogólnie rzecz biorąc, uruchamianie animacji jest wyzwalane przez interakcję użytkownika z tą samą kontrolką. Istnieje jednak również możliwość interakcji z jedną kontrolką, a następnie animacja innej kontrolki.
Kroki
Najpierw dołącz element ScriptManager na stronie, a następnie załadowano bibliotekę ASP.NET AJAX, umożliwiając korzystanie z zestawu narzędzi control Toolkit:
<asp:ScriptManager ID="asm" runat="server" />
Animacja zostanie zastosowana do panelu tekstu, który wygląda następująco:
<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
</asp:Panel>
W skojarzonej klasie CSS panelu zdefiniuj ładny kolor tła, a także ustaw stałą szerokość panelu:
<style type="text/css">
.panelClass {background-color: lime; width: 300px;}
</style>
Aby rozpocząć animowanie panelu, używany jest przycisk HTML. Należy pamiętać, że <input type="button" /> jest faworyzowany <asp:Button /> , ponieważ nie chcemy powrotu po kliknięciu tego przycisku przez użytkownika.
<input type="button" id="Button1" runat="server" Value="Launch Animation" />
Następnie dodaj element AnimationExtender do strony, podając IDatrybut , TargetControlID i obowiązkowy runat="server"element . Ważne jest, aby ustawić TargetControlID identyfikator przycisku (element wyzwalający animację), a nie identyfikator panelu (element, który jest animowany)
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1">
W węźle <Animations> umieść animacje tak jak zwykle. Aby zmienić panel, a nie przycisk, ustaw AnimationTarget atrybut dla każdego elementu animacji w programie AnimationExtender. Wartość parametru AnimationTarget to identyfikator panelu, oczywiście. W ten sposób animacje odbywają się w panelu, a nie za pomocą przycisku wyzwalania. Oto znaczniki dla tego scenariusza AnimationExtender :
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
<Animations>
<OnClick>
<Sequence>
<EnableAction Enabled="false" />
<Parallel>
<FadeOut Duration="1.5" Fps="24" AnimationTarget="Panel1" />
<Resize Width="1000" Height="150" Unit="px"
AnimationTarget="Panel1" />
</Parallel>
</Sequence>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
Zwróć uwagę na specjalną kolejność wyświetlania poszczególnych animacji. Po uruchomieniu animacji przycisk zostanie zdezaktywowany. Ponieważ w elemecie nie AnimationTarget ma atrybutu <EnableAction> , ta animacja jest stosowana do kontrolki źródłowej: przycisku. Kolejne dwa kroki animacji są wykonywane równolegle (<Parallel> element). Oba mają swoje AnimationTarget atrybuty ustawione na "Panel1", a tym samym animowanie panelu, a nie przycisku.
Kliknięcie myszy powoduje uruchomienie animacji panelu (kliknij, aby wyświetlić obraz pełnowymiarowy)
