Использование анимации для создания эффекта плавного исчезновения

Существует возможность создавать довольно интересный эффект плавного исчезновения, изменяя степень прозрачности элемента. Для начала рассмотрим реализацию этого эффекта программным способом. В функции pageLoad() создадим новый объект Sys.Preview.UI.Effects.FadeAnimation:
var ani = new Sys.Preview.UI.Effects.FadeAnimation();

Затем, в качестве целевого, устанавливаем элемент метки (элемент ), который будет присутствовать на странице:
ani.set_target($get("Label1").control);

По умолчанию эффект этой анимации заключается в плавном исчезновении элемента. Однако в перечислении Sys.Preview.UI.Effects.FadeEffect определены два варианта: FadeIn и FadeOut, которые могут передаваться методу set_effect() для изменения эффекта:
ani.set_effect(Sys.Preview.UI.Effects.FadeEffect.FadeOut);

Затем определим протяженность анимации по времени. По умолчанию протяженность составляет одну секунду – в следующем фрагменте эта величина утраивается:
ani.set_duration(3);

И в заключение мы запускаем эффект анимации:
ani.play();

Полный код страницы приводится в примере 19.1.
Пример 19.1. Использование эффекта плавного исчезновения
FadeAnimation.aspx
<%@ Page Language="C#" %>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1?transitional.dtd"> ASP.NET AJAX


(body)
(asp:ScriptManager runat="server" ID="ScriptManager1")

(asp:ScriptReference name="PreviewScript.js"
assembly="Microsoft.Web.Preview" /)
(asp:ScriptReference name="PreviewGlitz.js"
assembly="Microsoft.Web.Preview" /)

(/asp:ScriptManager)





(/body)


Обратите внимание на используемый стиль CSS display: inline-block.


Без этого объявления Internet Explorer не будет воспроизводить анимационный эффект (по причинам, которые я так и не смог определить).

Запустить анимацию можно не только из программного кода, но и с помощью xml?script, как показано ниже:
(application)





В примере 19.2 приводится полный код страницы, где наиболее важные элементы выделены жирным шрифтом. В этом примере мы явно не задаем продолжительность, поэтому анимация будет длиться в течение одной секунды.
Пример 19.2. Реализация анимационного эффекта с использованием xml?script
FadeAnimationDeclarative.aspx
<%@ Page Language="C#" %>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1?transitional.dtd"> ASP.NET AJAX

(body)
(asp:ScriptManager runat="server" ID="ScriptManager1")

(asp:ScriptReference name="PreviewScript.js"
assembly="Microsoft.Web.Preview" /)
(asp:ScriptReference name="PreviewGlitz.js"
assembly="Microsoft.Web.Preview" /)

(/asp:ScriptManager)





(/body)
.



Оцените статью: (0 голосов)
0 5 0

Статьи из раздела ASP.NET AJAX на эту тему:
Группировка анимационных эффектов
Использование LengthAnimation для перемещения элемента
Использование анимации для перемещения элемента
Использование анимационных эффектов