Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Permet d'animer des éléments HTML
class DOMAnimations {
/**
* Masque un élément avec un effet de repli
* @param {HTMLElement} element
* @param {Number} duration
* @returns {Promise<boolean>}
*/
static slideUp (element, duration = 500) {
return new Promise(function (resolve, reject) {
element.style.height = element.offsetHeight + 'px'
element.style.transitionProperty = `height, margin, padding`
element.style.transitionDuration = duration + 'ms'
element.offsetHeight // eslint-disable-line no-unused-expressions
element.style.overflow = 'hidden'
element.style.height = 0
element.style.paddingTop = 0
element.style.paddingBottom = 0
element.style.marginTop = 0
element.style.marginBottom = 0
window.setTimeout(function () {
element.style.display = 'none'
element.style.removeProperty('height')
element.style.removeProperty('padding-top')
element.style.removeProperty('padding-bottom')
element.style.removeProperty('margin-top')
element.style.removeProperty('margin-bottom')
element.style.removeProperty('overflow')
element.style.removeProperty('transition-duration')
element.style.removeProperty('transition-property')
resolve(false)
}, duration)
})
}
/**
* Affiche un élément avec un effet de dépliement
* @param {HTMLElement} element
* @param {Number} duration
* @returns {Promise<boolean>}
*/
static slideDown (element, duration = 500) {
return new Promise(function (resolve, reject) {
element.style.removeProperty('display')
let display = window.getComputedStyle(element).display
if (display === 'none') display = 'block'
element.style.display = display
let height = element.offsetHeight
element.style.overflow = 'hidden'
element.style.height = 0
element.style.paddingTop = 0
element.style.paddingBottom = 0
element.style.marginTop = 0
element.style.marginBottom = 0
element.offsetHeight // eslint-disable-line no-unused-expressions
element.style.transitionProperty = `height, margin, padding`
element.style.transitionDuration = duration + 'ms'
element.style.height = height + 'px'
element.style.removeProperty('padding-top')
element.style.removeProperty('padding-bottom')
element.style.removeProperty('margin-top')
element.style.removeProperty('margin-bottom')
window.setTimeout(function () {
element.style.removeProperty('height')
element.style.removeProperty('overflow')
element.style.removeProperty('transition-duration')
element.style.removeProperty('transition-property')
}, duration)
})
}
/**
* Affiche ou Masque un élément avec un effet de repli
* @param {HTMLElement} element
* @param {Number} duration
* @returns {Promise<boolean>}
*/
static slideToggle (element, duration = 500) {
if (window.getComputedStyle(element).display === 'none') {
return this.slideDown(element, duration)
} else {
return this.slideUp(element, duration)
}
}
}
@leoboyerbx

This comment has been minimized.

Copy link

leoboyerbx commented Aug 26, 2018

Petite suggestion pour améliorer le code mais ça tient plus du perfectionnisme que de la réelle optiomisation, on gagne 2 lignes :
Lignes 44 à 46

let display = window.getComputedStyle(element).display
if (display === 'none') display = 'block'
element.style.display = display

Si on utilise l'opérateur ternaire, ça donne :

element.style.display = window.getComputedStyle(element).display === 'none' ? 'block' : window.getComputedStyle(element).display

Ça évite de définir une variable, mais la lisibilité en prend un coup... à voir ! :)

@michael-lurquin

This comment has been minimized.

Copy link

michael-lurquin commented Aug 28, 2018

@leoboyerbx, je préfère aussi les opérateurs ternaires mais dans ce cas-ci, je ne suis pas tout à fait d'accord, je m'explique.

Dans ta proposition, tu appelles (parfois) 2 fois la même méthode window.getComputedStyle(element), ce qui est un inconvénient en terme de performance, tu ne sais pas ce que fait cette méthode, ni combien de temps dure t'elle ?

Donc, je préfère la solution de @Grafikart, qui est de stocker tout simplement le résultat de la méthode dans une variable locale et puis d'en faire ce que l'on veut, le résultat est déjà calculé, plus besoin de rappeler la méthode, une deuxième fois.

Après on pourrait très bien faire :

let display = window.getComputedStyle(element).display
element.style.display = display === 'none' ? 'block' : display
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.