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

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

Загрузить PDF-файл

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

Общие сведения

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

Этапы

Во-первых, добавьте 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" />

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

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

НазадВперед