Получить пользовательские значения CSS в JS

Question

У меня есть две функции, которые называются slideDown, slideUp.

Когда я хочу использовать функцию slideUp, это очень удобно, потому что я устанавливаю значения высоты, полей и отступов равными 0.

Но использовать slideDown сложно! Взгляните на следующее: (К сожалению, я не могу просмотреть код)

Element.prototype.addAnimate = function(animateObj,timer=500,callback,hidden=false) {
    let oldStyle = {};
    let newStyle = {};
    let thisElement = this;
    this.style.display = 'block';
    if (typeof arguments[1] == 'function') {
        timer = 500;
        callback = arguments[1];
    } else if (typeof arguments[1] == 'number') {
        timer = timer;
        callback = callback;
    }
    for (styleName in animateObj) {
        let oldStyleValue = window.getComputedStyle(this,null).getPropertyValue(styleName.replace(/[A-Z]/g,'-$&').toLowerCase());
        oldStyle[styleName] = oldStyleValue;
        newStyle[styleName] = animateObj[styleName];
    }
    let animation = this.animate([oldStyle,newStyle],{
        duration:timer,
        fill:'forwards'
    });
    animation.onfinish = () => {
        if (callback && typeof callback == 'function') {
            callback();
        }
        if (hidden == true) {
            thisElement.style.display = 'none';
        }
    }
}

( addAnimate функция используется для установки анимации на элементы, которые используют API анимация )

Element.prototype.slideUp = function() {
    let timer = (typeof arguments[0] == 'number') ? arguments[0] : 250;
    let callback = (typeof arguments[1] == 'function') ? arguments[1] : arguments[0];
    this.addAnimate({
        overflow:'hidden',
        height:'10px',
        marginTop:0,
        marginRight:0,
        marginBottom:0,
        marginLeft:0,
        paddingTop:0,
        paddingRight:0,
        paddingBottom:0,
        paddingLeft:0,
    },timer,callback,false);
}

(Как я уже сказал, использование функции slideUp для меня не проблема)

Element.prototype.slideDown = function() {
    let timer = (typeof arguments[0] == 'number') ? arguments[0] : 250;
    let callback = (typeof arguments[1] == 'function') ? arguments[1] : arguments[0];
    this.addAnimate({
        height:'auto',
        marginTop:'auto',
        marginRight:'auto',
        marginBottom:'auto',
        marginLeft:'auto',
        paddingTop:'auto',
        paddingRight:'auto',
        paddingBottom:'auto',
        paddingLeft:'auto',
    },timer,callback);
}

Основная проблема с этой функцией заключается в том, как получить значения, которые уже установлены (например, функция slideDown в Jquery). Когда я устанавливаю значения auto, стили применяются без анимации. (I do not want to use Jquery)

Answer 1

Хитрость здесь в том, чтобы сохранить значение стилей по умолчанию для вашего элемента где-то до первого обновления. Вы также можете использовать element.removeAttribute('style') ( документ здесь )

Вот базовый пример:

let toggle = false;
const elem = document.querySelector('.no-auto');
const defaultStyles = { // Get default styles
  width: elem.style.width,
  height: elem.style.height,
  backgroundColor: elem.style.backgroundColor,
};

function toggleAnimate() {
  toggle = !toggle;
  const styles = elem.style;

  if (toggle) {
    styles.width = '60px';
    styles.height = '50px';
    styles.backgroundColor = 'blue';
  } else {
    styles.width = defaultStyles.width;
    styles.height = defaultStyles.height;
    styles.backgroundColor = defaultStyles.backgroundColor;
  }

}

elem.addEventListener('click', toggleAnimate);

.no-auto {
  width: 120px;
  height: 100px;
  background-color: red;
  transition: all 0.3s ease;
}

<div class="no-auto">
</div>