Wykonywanie kilku animacji jedna po drugiej (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. Umożliwia uruchamianie kilku animacji jeden po drugim.
Kontrolka Animacja w zestawie narzędzi ASP.NET AJAX Control Toolkit nie tylko jest kontrolką, ale całą strukturą do dodawania animacji do kontrolki. Umożliwia uruchamianie kilku animacji jeden po drugim.
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>
Następnie dodaj element AnimationExtender do strony, podając IDatrybut , TargetControlID i obowiązkowy runat="server":
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
W węźle użyj polecenia <OnLoad> , aby uruchomić animacje po pełnym załadowaniu <Animations> strony. Ogólnie rzecz biorąc, <OnLoad> akceptuje tylko jedną animację. Struktura Animacja umożliwia dołączenie kilku animacji do jednego przy użyciu <Sequence> elementu . Wszystkie animacje wewnątrz <Sequence> są wykonywane jeden po drugim. Oto możliwe znaczniki dla kontrolki AnimationExtender , najpierw tworząc panel szerszy, a następnie zmniejszając jego wysokość:
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
<Animations>
<OnLoad>
<Sequence>
<Resize Width="1000" Unit="px" />
<Resize Height="150" Unit="px" />
</Sequence>
</OnLoad>
</Animations>
</ajaxToolkit:AnimationExtender>
Po uruchomieniu tego skryptu panel najpierw staje się szerszy, a następnie mniejszy.
Najpierw zwiększa się szerokość (kliknij, aby wyświetlić obraz pełnowymiarowy)
Następnie wysokość zostanie zmniejszona (kliknij, aby wyświetlić obraz pełnowymiarowy)
