Отключение действий во время анимации (C#)

Кристиан Венц

Скачать в формате PDF

Элемент управления "Анимация" в наборе средств управления AJAX ASP.NET — это не только элемент управления, но и вся платформа для добавления анимаций в элемент управления. Он также поддерживает действия, такие как щелчки мыши. Однако при нажатии мыши на анимацию желательно отключить щелчки мыши во время анимации.

Обзор

Элемент управления "Анимация" в наборе средств управления AJAX ASP.NET — это не только элемент управления, но и вся платформа для добавления анимаций в элемент управления. Он также поддерживает действия, такие как щелчки мыши. Однако при нажатии мыши на анимацию желательно отключить щелчки мыши во время анимации.

Шаги

Во-первых, включите ScriptManager на страницу, а затем загружается библиотека AJAX ASP.NET, что позволяет использовать набор элементов управления.

<asp:ScriptManager ID="asm" runat="server" />

Анимация будет применена к кнопке HTML следующим образом:

<input type="button" ID="Button1" runat="server" Value="Launch Animation" />

Обратите внимание, что элемент управления HTML используется вместо веб-элемента управления, так как мы не хотим, чтобы кнопка создавала обратную передачу; он должен просто запустить клиентская анимация для нас.

Затем добавьте AnimationExtender на страницу, указав ID и TargetControlID атрибут, а также обязательный runat="server".

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1">

В узле <Animations><OnClick> является подходящим элементом для обработки щелчка мыши. Кнопку также можно нажать во время анимации. Элемент <EnableAction> может заботиться об этом. Параметр Enabled="false" отключает кнопку в рамках анимации. Учитывая, что мы используем несколько отдельных анимаций (включая отключение кнопки и сами анимации), элемент <Parallel> необходим для объединения этих отдельных анимаций в одну. Ниже приведена полная разметка для AnimationExtender:

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1">
 <Animations>
 <OnClick>
 <Parallel>
 <EnableAction Enabled="false" />
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

Кроме того, можно будет повторно включить кнопку после анимации, используя следующий XML-элемент в конце списка:

<EnableAction Enabled="true" />

Однако в данном сценарии это будет бесполезно, так как кнопка исчезает и не отображается в конце анимации.

Кнопка отключена сразу после запуска анимации (щелкните, чтобы просмотреть изображение полного размера)