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

Кристиан Венц (Christian Wenz)

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

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

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

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

Этапы

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

<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" />

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

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

НазадВперед