На самом деле это грязный хак поскольку по умолчанию у всех элементов если не указано это свойство то параметр имеет значение none. Если казано только значение трансформации осей X и Y - браузер выставляет значение в transform 2D матрицу, но как только указано значение Z то матрица сразу приобретает вид 3D трансформации.
Чтобы написать как можно короче и эффективнее мне не осталось ничего другого кроме как вручную устанавливать параметры матрицы автоматически в 3D режим путем перепарса Computed Style и перегруппировки. Вот кусок оригинального кода:
// get matrix and set a default value if not present
var matrixStart = (window.getComputedStyle(e[x], null)[prop] === 'none') ? 'matrix(1, 0, 0, 1, 0, 0)' : window.getComputedStyle(e[x], null)[prop];
var M2D = $.arguments(this.getValFromPropsBrackets('matrix',matrixStart)[1], ',');
// set matrix from 2D to 3D
if( M2D.length <= 6) {
var matrix3D = 'matrix3d('+ M2D[0] +', '+ M2D[1] +', 0, 0, '+ M2D[2] +', '+ M2D[3] +', 0, 0, 0, 0, 1, 0,'+ M2D[4] +','+ M2D[5] +', 0, 1)'
}
else {
var matrix3D = window.getComputedStyle(e[x], null)['transform'];
}
// extract matrix values
var M3D = $.arguments(this.getValFromPropsBrackets('matrix3d',matrix3D)[1], ',');
//console.log(M3D);
/*
matrix3d pattern
1, 0, 0, 0, 1 scalex 6 scaley 11 scalez
0, 1, 0, 0, 5 skewX 2 skewY
0, 0, 1, 0, 10 rotateX 9 rotateY 1 rotateZ
tx, ty , tz, 1 13 translateX 14 translateY 15 translateZ
12 - perspective
*/
В результате затрагиваемый элемент дом сразу же снабжается переупакованной матрицей 4x4 из 16ти значений. Я кстати задействовал не все параметры, которые мог и можно было достичь интересных эффектов типа блика солнечных лучей на камере если затрагивать перспективу, но это уж недокументированная фича. Собственно. 1). считываем текущую конфигурацию матрицы. Если none, то прописывает дефолтные параметры трансформации не затрагивая и не искажая ничего 2). переупаковываем 2D матрицу в 3D матрицу с учетом 2D трансформации. 3). запускаем анимацию с параметрами полученными при "оригинальной" прописи свойства transform как по стандарту CSS, дробим все это на сегменты и запускаем анимацию каждого вектора отдельным контекстом через RAF. В результате получаем обрисованный по матрице 3D элемент по всем трем осям если эти значения отличны от 0. Например: $.dom( '#logotype img','animate', ['width:349px:1000:bounce','height:188px:1000:bounce', 'transform: perspective(40px) rotate(360deg,360deg,360deg):900:bounce'] ); Меняем ширину с bounce, трансформируем перспективу и вращаем по всем трем осям за 900 миллисекунд используя тот же эффект bounce. Все элементарно просто на выходе. Сейчас у меня код маленько с запашком, но я на первых порах работал в основном над самими механизмами и не внедрял никаких паттернов кроме SOLID и Module на Single Namespase. В будущем это будет переработано, но как я пока не могу придумать. Присоединяйтесь. Код выложен на GitHub, вся документация по API на английском. Связки в ядре элементарные специально чтобы было как можно проще и быстрее влиться в разработку. |
1.7.2
- Обнаружился баг связанный со скоростью иниуиализации Android browser: метод самоинициализации позаимствован у jQuery. - Добавлен $.fireEvent для симуляции таких событий как click и submit и так далее. - Частично переписано на ES6. Со временем полностью избавлюсь от Legacy кода(бабулю не предлагать - лишний мартышкин труд). - Исправно работает на трех проектах, один из которых - калькулятор стоимости пластиковых окон и конструкций ПВХ. Будут еще проекты где можно использовать - будут новые фичи. Принимаю заявки на нужные вам модули. |
Evolution сдохла потому что полноценный фреймворк писать некогда да и я сам в другой области деятельности сейчас обитаю, однако, переназвал проект RevolveR и позиционирую как front-end микро библиотеку.
Сохранено API и совместимость в принципе есть с legacy evo. Код переписан на ES6 / ES7 почти полностью. Интерфейс теперь реализован на классах и можно юзать любой префикс namespace на ваш выбор. Тоесть теперь совместимо с $ зависимыми либами. Многое оптимизировал и переработал. Babel не смог мой код скомпилировать да и нет смысла компилировать из 7 в 6 - все равно ждать пока трахнутый MS подтянет свои ишаки - эджаки. Разрабатываться будет медленно. Некогда. Есть пожелания или сообщения о багах - пишите в трекер. https://github.com/xShiftx/revolver Планирую дорабатывать дальше. p.s.: Аякса больше нет. Теперь работает на движке Fetch. p.s.s: если кто захочет поразрабатывать - плиз не используйте новые циклы - это ущерб производительности и я против промисов. |
Нашел время проверить как все работает в Edge. Оказывается работает все что нужно. Теперь даже babel не нужен так как ни один нормальный пользователь не использует IE. Это хорошо.
Добавлен индикатор прокрутки страницы, легаси код почти отсутствует + немного оптимизированы методы для работы с предварительной обработкой CSS стилей перед анимацией. Всего 42кб основной движок и можно делать достаточно симпатичные SPA сайты как например arch66.pro |
1.0.6 : + DOM методы wrap, unwrap, replace
в планах методы для отработки элементов форм типа валидатора интегрированного с bootstrap и стилями, а также автоматический коструктор data объекта для отправки через fetch. Пока думаю как сделать. |
Я убил Хромиум своим каким-то await eval. В ожидании дьявола поперхнулась Opera, Yandex, Chrome, Chromium и все остальные браузеры, которые на движке Chromium.
Ошибку обещают исправить к 19 Июля, когда будет глобальное обновление. Это значит, что те кто перекрашивал иконку и не разрабатывал барузер обновят еще немного позже. Стабильно работает в Safari, Edge и FireFox. Ждите, кто использовал и не понял почему зависло. Ссылки: https://bugs.chromium.org/p/chromium...tail?id=855181 Сноска: Bulk update: M68 stable cut is scheduled for July 19th. This issue is marked as RB-Stable, so please take a look at it before. Thanks! |
А у вас проц. какой?
|
Я на i3 U серии тестил. Там в хроме завис bounce(код заимствовал на этом сайте для коллекции easings) - исправлено уже месяца как 3 или 4.
v.1.1.2 : исправлены ошибки при работе на субдоменах. добавлен $.cookie модуль. Теперь работает на андроидах последних обновленных версий браузера. Все перешло на Chrome. |
Если я хочу contenteditable div, то это не будет работать...
let formInputs = this.querySelectorAll("input[type='text']...
Если я хочу custom markup... i.outerHTML = '<div class="revolver__form-hidden-input">'+ i.outerHTML +'</div>'; ... Но, плюсик поставлю за упорство ) ... Интересно мнение по поводу https://github.com/jorgebucaran/hyperapp |
SuperZen,
1. ну можно и это прицепить. идей почти не подают поэтому че самому надо, то и реализую. 2. оно у меня было в основном под RevolveR CMS(https://dev.to/xshiftx/writing-revol...t-for-fun-5efo) запилено, можно и кастомную разметку. Накиньте пример API как бы вам было удобно. 3. TS не люблю. Я вот думаю, стоит ли переписывать на jQuery like(http://cyberx.pro/querySelectorAll-r...hout-jQuery/)? p.s.: 1.2.2.1 : исправлена работа с hash в url строке(UNIT TEST: https://xshiftx.github.io/RevolveR/#UNIT-TEST :: для тестирования fetch разверните на localhost c PHP так как git не умеет выполнять пыхапэ). https://github.com/xShiftx/RevolveR |
| Часовой пояс GMT +3, время: 14:34. |