Проблемы с расширением анимации

Question

Я только начал работать с AnimationExtender. Я использую его, чтобы показать новый div со списком, собранным из базы данных при нажатии кнопки. Проблема в том, что кнопка должна сделать обратную передачу, чтобы получить этот список, поскольку я не хочу делать вызов в базу данных, если она не нужна. Однако обратная передача останавливает анимацию в середине потока и сбрасывает ее. Кнопка находится на панели обновления.

В идеале я бы хотел, чтобы анимация запускалась после завершения обратной передачи и сбора списка. Я рассмотрел использование ScriptManager, чтобы определить, когда завершена обратная передача, и добился некоторого прогресса. Я добавил на страницу два метода javascript.

function linkPostback() {

        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(playAnimation)
    }

    function playAnimation() {
        var onclkBehavior = $find("ctl00_btnOpenList").get_OnClickBehavior().get_animation();
        onclkBehavior.play();
    }

И я изменил btnOpenList.OnClientClick=”linkPostback();”

Это почти решает проблему. Я все еще получаю заикание анимации. Анимация начинает воспроизводиться до обратной передачи, а затем воспроизводится правильно после обратной передачи. Использование onclkBehavior.pause() не имеет никакого эффекта. Я могу обойти это, установив AnimationExtender.Enabled = false и установив для него значение true в событии обратной передачи кнопок. Однако это работает только один раз, так как теперь AnimationExtender снова включен. Я также пытался отключить AnimationExtender через JavaScript, но это не имеет никакого эффекта.

Есть ли способ воспроизведения анимации только через вызовы javascript? Мне нужно отделить автоматическую ссылку на событие нажатия кнопки, чтобы я мог контролировать, когда анимация запускается.

Надеюсь, что это имеет смысл.

Спасибо

DG

Answer 1

Поток, который вы видите, выглядит примерно так:

1. Нажмите на кнопку
2. AnimationExtender ловит действие и вызывает clickOn callback
3. linkPostback запускает асинхронный запрос на страницу, а затем возвращает поток в AnimationExtender
4. Анимация начинается
5. pageRequest возвращает и вызывает playAnimation, которая снова запускает анимацию

Я думаю, что есть как минимум два пути решения этой проблемы. Кажется, у вас есть почти весь необходимый вам javascript, вам просто нужно обойти AnimationExtender, запуская анимацию одним кликом.

Вариант 1. Скройте кнопку AnimationExtender и добавьте собственную кнопку, которая воспроизводит анимацию. Это должно быть так же просто, как установить стиль кнопки AE на «display: none;» и наличие собственной кнопки вызова linkPostback ().

Вариант 2. Повторно отключите расширитель анимации после завершения анимации. Это должно работать, пока вызов playAnimation блокируется, что, вероятно, таково:

function linkPostback() {

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(playAnimation)
}

function playAnimation() {

    AnimationExtender.Enabled = true;
    var onclkBehavior = $find("ctl00_btnOpenList").get_OnClickBehavior().get_animation();
    onclkBehavior.play();
    AnimationExtender.Enabled = false;
}

Кроме того, кажется, что ваш общий подход может столкнуться с проблемами, если есть задержка в получении запроса страницы. Может быть немного странно нажимать кнопку, и через несколько секунд анимация происходит. Может быть, лучше либо предварительно загрузить данные, либо предварительно заполнить div чем-то вроде «Загрузка ...», выбрать нужный размер, а затем заполнить фактическое содержимое, когда оно прибудет.

Answer 2

С помощью данного ответа окончательное решение было следующим:

Добавьте еще одну кнопку и скройте ее.

<input id="btnHdn" runat="server" type="button" value="button" style="display:none;" />

Направьте AnimationExtender на скрытую кнопку, чтобы никогда не происходило срабатывание события нежелательного нажатия.

<cc1:AnimationExtender ID="aniExt" runat="server" TargetControlID="btnHdn">

Подключите JavaScript к кнопке, которую вы хотите запустить анимацию после завершения обратной передачи.

<asp:ImageButton ID="btnShowList" runat="server" OnClick="btnShowList_Click" OnClientClick="linkPostback();" />

Добавьте необходимый Javascript на страницу.

function linkPostback() {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(playOpenAnimation)
}

function playOpenAnimation() {
    var onclkBehavior = ind("ctl00_aniExt").get_OnClickBehavior().get_animation();
    onclkBehavior.play();         

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.remove_endRequest(playOpenAnimation) 
}