Обновление до JQuery UI 1.12 сломал слайд() и падение() эффекты

Question

Цитирование Upgrade Guide:

эффекты капитального ремонта: эффекты API, получил капитальный ремонт, вводя много новых API, и переписывание эффекты к используйте CSS-клип для более плавных и менее подверженных ошибкам анимаций. Кроме того, эффект переноса был заменен на .transfer().

У меня есть держатель div с «слайдом div» внутри него. Кажется, что 1.12 вызвало эффект слайда/падения на начальном этапе display: none, затем clip? Результатом является прерывистый, мигающий беспорядок, который никоим образом не похож на слайд.

Я пытался обойти это некоторое время. Я надеюсь, что кто-то столкнулся с этой проблемой и каким-то образом ее решил. Это происходит и для любого элемента на странице. Я думал, что это конфликт с другими CSS или JS, но я отключил все, что мог, и все еще ничего.

Эта ошибка возникает в последних версиях Firefox, Chrome и Internet Explorer.

Answer 1

Я не могу воспроизвести опубликованную вами проблему. Настройка I Эффект Demo с помощью JQuery 2.2.3 и JQuery UI 1.12.0-RC.1, видел здесь: https://jsfiddle.net/Twisty/vrgosgca/

HTML

<div class="toggler"> 
    <div id="effect" class="ui-widget-content ui-corner-all"> 
    <h3 class="ui-widget-header ui-corner-all">Effect</h3> 
    <p> 
     Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. 
    </p> 
    </div> 
</div> 

<select name="effects" id="effectTypes"> 
    <option value="blind">Blind</option> 
    <option value="bounce">Bounce</option> 
    <option value="clip">Clip</option> 
    <option value="drop">Drop</option> 
    <option value="explode">Explode</option> 
    <option value="fade">Fade</option> 
    <option value="fold">Fold</option> 
    <option value="highlight">Highlight</option> 
    <option value="puff">Puff</option> 
    <option value="pulsate">Pulsate</option> 
    <option value="scale">Scale</option> 
    <option value="shake">Shake</option> 
    <option value="size">Size</option> 
    <option value="slide">Slide</option> 
    <option value="transfer">Transfer</option> 
</select> 

<button id="button" class="ui-state-default ui-corner-all">Run Effect</button> 

JQuery UI

$(function() { 
    // run the currently selected effect 
    function runEffect() { 
    // get effect type from 
    var selectedEffect = $("#effectTypes").val(); 

    // most effect types need no options passed by default 
    var options = {}; 
    // some effects have required parameters 
    if (selectedEffect === "scale") { 
     options = { 
     percent: 0 
     }; 
    } else if (selectedEffect === "transfer") { 
     options = { 
     to: "#button", 
     className: "ui-effects-transfer" 
     }; 
    } else if (selectedEffect === "size") { 
     options = { 
     to: { 
      width: 200, 
      height: 60 
     } 
     }; 
    } 

    // run the effect 
    $("#effect").effect(selectedEffect, options, 500, callback); 
    }; 

    // callback function to bring a hidden box back 
    function callback() { 
    setTimeout(function() { 
     $("#effect").removeAttr("style").hide().fadeIn(); 
    }, 1000); 
    }; 

    // set effect from select menu value 
    $("#button").click(function() { 
    runEffect(); 
    return false; 
    }); 
}); 

Действие слайда выглядит плавным. Я выбрал этот пример, поскольку он был тесно связан с вашим описанием. Поскольку вы не указали пример кода, который используете, я не могу сказать, почему ваш «изменчив».

Сначала, я думал, вы имели в виду .slider(). В будущем всегда включайте пример кода.

Answer 2

Проблема была вызвана глобальным CSS, который использовал translatez() для обхода визуального сбоя в Chrome. Он был помещен за пределы стандартного файла CSS.

#main-content * { 
    webkit-transform: translatez(0); 
    -moz-transform: translatez(0); 
    transform: translatez(0); 
} 

Per пользовательского интерфейса команды JQuery:

эффекты API получил капитальный ремонт, вводя много новых API, и переписывание эффекты, чтобы использовать CSS клип для более плавного и менее подверженных ошибкам анимации.

Это затронуло все дочерние div в основном содержимом и помешало анимации, используя clip. К счастью, сбой произошел из-за старых, иногда проблемных эффектов, поэтому ничего не было потеряно, удалив такие строки.

Если вы используете translatez(), чтобы обойти Chrome-глюк Chrome и получить эту ошибку, теперь вы можете безопасно удалить преобразование.