Question

假设我使用JS将过渡样式添加到DOM元素。我可能会从不同的代码段添加多个不同属性的转换，例如height转换，background-color转换等。

如果我只是写：

// Location 1
el.style.transition = 'height 1s';

// Location 2
el.style.transition = 'background-color 1s';

然后，如果将这些转换应用于同一元素，则这些转换中的任何一个都可能会覆盖另一个转换。

（如果你允许我这么强调，那么CSS不是数据库是一件好事，因为这似乎违反了第一范式，因为它将结构化数据整合到了一个文本字段，因此就其结构而言，操纵数据并不容易。）

我想对此产生影响（无效）：

// Location 1
el.style.transition.height = '1s';

// Location 2
el.style.transition.backgroundColor = '1s';

如果它们是有效的，那么它们将彼此独立地控制不同属性的转换。

问题：是否可以为单个CSS属性添加/删除元素的转换，而无需解析现有的transition字符串？

其中一项是否有效：

// Location 1
el.style.transition= 'height 1s, ' + el.style.transition;

或

// Location 1
el.style.transition = el.style.transition + ', height 1s';

因此，如果将height转换多次添加到同一元素，则最新的转换将是第一个（或最后一个）并优先使用？或者，在元素的transition属性中多次包含相同的属性是否合法/未指定第一次或最后一次出现是否优先？

Answer 1

像这样的人如何

let transitionsObject = {
  height: '0.2s linear',
  width: '0.2s ease-in-out'
}

function patchTransitions(el, newOnes) {
  let old = el.style.transition.split(',');
  let news = Object.keys(newOnes).map(e => `${e} ${newOnes[e]}`);
  el.style.transition = [...old, ...news].join(',');
}

并且请记住，如果您不想将骆驼案例解析为空格，您可以为对象分配属性，即使是空格（例如obj['we hate this'] = someValue）

＆＃13;

let transitionsObject = {
  height: '0.2s linear',
  width: '0.2s ease-in-out'
}

function patchTransitions(el, newOnes) {
  let old = el.style.transition.split(',');
  let news = Object.keys(newOnes).map(e => `${e} ${newOnes[e]}`);
  el.style.transition = [...old, ...news].join(',');
}

let el = document.getElementById('mario');
el.style.transition = 'width 0.2s linear';

setInterval(() => {
  el.style.width = el.style.width == '400px' ? '200px' : '400px';
  el.style.height = el.style.height == '400px' ? '200px' : '400px';
}, 1000);

document.getElementById('patch').onclick = () => {
  let trans = {
    height: '0.2s ease-in-out',
  };
  patchTransitions(el, trans);
}

＆＃13;

#mario {
  background-color: blue;
}

＆＃13;

<button id="patch">click me</button>
<div id="mario">watch me</div>

＆＃13;

以编程方式添加过渡样式而不删除现有样式

1 个答案: