如何在JavaScript中避免动态样式转换

我正在使用JavaScript复制

div#old

的所有样式，并动态地将其用于

div#young

。我已经成功地完成了，但是当我添加

transition

属性时，

div#young

将转换应用于我复制的所有我不想要的样式

这是我的密码：

let style=getComputedStyle（旧版）；
all_style=[“宽度”、“高度”、“背景”、“边界半径”、“过渡”]
对于（变量i=0；i

.container{
显示器：flex；
证明内容：周围的空间；
宽度：60%；
}
#旧的{
宽度：110px；
高度：110px；
背景：红色；
边界半径：50%；
过渡：1s轻松输入输出全部；
}
#年轻的{
宽度：var（--宽度）；
高度：var（--高度）；
背景：var（--背景）；
边界半径：var（--边界半径）；
转换：var（--转换）；
}

---

添加转换时几乎没有延迟

let style=getComputedStyle（旧版）；
all_style=[“宽度”、“高度”、“背景”、“边界半径”、“过渡”]
对于（变量i=0；i{
young.style.setProperty（`--${all_style[i]}`，styles.getPropertyValue（all_style[i]）；
}，10）；//1秒/100
}
}

.container{
显示器：flex；
证明内容：周围的空间；
宽度：60%；
}
#旧的{
宽度：110px；
高度：110px；
背景：红色；
边界半径：50%；
过渡：1s轻松输入输出全部；
}
#年轻的{
宽度：var（--宽度）；
高度：var（--高度）；
背景：var（--背景）；
边界半径：var（--边界半径）；
转换：var（--转换）；
}

---

做出

0

你不想发生的转变。顺序很重要，

all

必须是第一个：

let style=getComputedStyle（旧版）；
all_style=[“宽度”、“高度”、“背景”、“边界半径”、“过渡”]
对于（变量i=0；i

.container{
显示器：flex；
证明内容：周围的空间；
宽度：60%；
}
#旧的{
宽度：110px；
高度：110px；
背景：红色；
边界半径：50%；
过渡：1s易入易出，边界半径为0s；
}
#年轻的{
宽度：var（--宽度）；
高度：var（--高度）；
背景：var（--背景）；
边界半径：var（--边界半径）；
转换：var（--转换）；
}

作为#young上的第一个样式，添加“transition:none！important”，查看为什么

div#young

会褪色in@Gad由于背景转换，从透明到透明red@Gad增加了另一个想法，以防你不需要任何过渡这正是我想要的谢谢