entrouvert/wcs
entrouvert
/
wcs
14
1
Fork 0
Code Issues Pull Requests 39 Releases Activity

JS: add visual effect when delete a blockSubWidget (#76172) #376

Merged
tjund merged 1 commits from wip/76172-animation-delete-block-row into main 2023-06-14 16:25:27 +02:00
Conversation 1 Commits 1 Files Changed 1 +22 -11
1 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
wcs/qommon/static/js/qommon.forms.js
View File

@ -710,6 +710,7 @@ $(function() {
const $add_button = $(this).parents('.BlockWidget').find('.list-add');
/* rename attributes in following blocks */
const $subwidget = $(this).parents('.BlockSubWidget').first();
const subwidget = $subwidget[0];
const name_parts = $subwidget.data('widget-name').match(/(.*)(\d+)$/);
const prefix = name_parts[1];
const idx = parseInt(name_parts[2]);
@ -720,17 +721,27 @@ $(function() {
}
});
}
$subwidget.nextAll('.BlockSubWidget').each(function(i, elem) {
const prefix1 = prefix + (idx + i + 1);
const prefix2 = prefix + (idx + i);
replace_prefix(elem, prefix1, prefix2);
$(elem).find('*').each(function(i, elem_child) { replace_prefix(elem_child, prefix1, prefix2); });
});
/* then remove row */
$subwidget.remove();
disable_single_block_remove_button();
/* display button then give it focus */
$add_button.show().find('button').focus();
subwidget.addEventListener('transitionend', function(event){
if (event.propertyName != "height") return;
$subwidget.nextAll('.BlockSubWidget').each(function(i, elem) {
const prefix1 = prefix + (idx + i + 1);
const prefix2 = prefix + (idx + i);
replace_prefix(elem, prefix1, prefix2);
$(elem).find('*').each(function(i, elem_child) { replace_prefix(elem_child, prefix1, prefix2); });
});
/* then remove row */
$subwidget.remove();
disable_single_block_remove_button();
/* display button then give it focus */
$add_button.show().find('button').focus();
})
subwidget.style.height = subwidget.clientHeight + 'px';
subwidget.style.transition = 'opacity 350ms, height 250ms 350ms';
fpeters commented 2023-06-13 16:26:58 +02:00
Outdated
Review
Copy Link

J'ai toujours lu qu'il fallait éviter les animations sur height. (?)

J'ai toujours lu qu'il fallait éviter les animations sur height. (?)
tjund commented 2023-06-13 17:30:58 +02:00
Outdated
Review
Copy Link

Peut-être parce que par défaut ça ne marche pas avec height: auto ?
Ou pour des soucis de perf ?
(une animation sur l'opacité est plus lourde en perf que sur la hauteur).

Peut-être parce que par défaut ça ne marche pas avec `height: auto` ? Ou pour des soucis de perf ? (une animation sur l'opacité est plus lourde en perf que sur la hauteur).
fpeters commented 2023-06-13 17:38:37 +02:00
Outdated
Review
Copy Link

Une recherche vite fait me donne https://www.freecodecamp.org/news/animating-height-the-right-way/ :

The reason for this is of course that animating the height property in CSS causes the browser to perform expensive layout and paint operations on every frame.

Une autre recherche donne une référence côté google dans cet article, https://web.dev/animations-guide/#triggers

Before using any CSS property for animation (other than transform and opacity), determine the property's impact on the rendering pipeline. Avoid any property that triggers layout or paint unless absolutely necessary.

et donc ça répond aussi à :

(une animation sur l'opacité est plus lourde en perf que sur la hauteur).

en disant le contraire.

Une recherche vite fait me donne https://www.freecodecamp.org/news/animating-height-the-right-way/ : > The reason for this is of course that animating the height property in CSS causes the browser to perform expensive layout and paint operations on every frame. Une autre recherche donne une référence côté google dans cet article, https://web.dev/animations-guide/#triggers > Before using any CSS property for animation (other than transform and opacity), determine the property's impact on the rendering pipeline. Avoid any property that triggers layout or paint unless absolutely necessary. et donc ça répond aussi à : > (une animation sur l'opacité est plus lourde en perf que sur la hauteur). en disant le contraire.
tjund commented 2023-06-13 17:53:07 +02:00
Outdated
Review
Copy Link

Merci pour les liens.
Comme j'applique une opacité à 0 en premier, je peux reduire l'espace avec une transition. Je change.

Merci pour les liens. Comme j'applique une opacité à 0 en premier, je peux reduire l'espace avec une transition. Je change.
tjund commented 2023-06-13 18:03:31 +02:00
Outdated
Review
Copy Link

ah ben non, transform ne modifie pas l'espace d'origine.
Je ne vois pas vraiment d'alternative.

ah ben non, transform ne modifie pas l'espace d'origine. Je ne vois pas vraiment d'alternative.
setTimeout( () => {
subwidget.style.opacity = '0';
subwidget.style.height = '0';
}, 20)
}
return false;
});