CSS转换第一次不起作用

Question

当有人单击相应的按钮时，我得到了一些函数来更改div.container的宽度。

宽度将在没有CSStransition: 0.9s;的情况下立即更改(我在代码中突出显示了它(。过渡只有在第一次之后才会起作用，我不知道为什么。。。

请运行下面的代码，然后你就会明白我的意思：

const settings = {
Desktop: {
width: "100%",
gridTemplateColumns: "repeat(2,minmax(200px,1fr))"
},
Tablet: {
width: "60%",
gridTemplateColumns: "repeat(1,minmax(200px,1fr))"
},
Phone: {
width: "30%",
gridTemplateColumns: "repeat(1,minmax(200px,1fr))"
}
}
function resize(which) {
let x = document.querySelectorAll(".Container");
for (let i = 0; i < x.length; i++) {
x[i].style.width = settings[which].width;
}
x = document.querySelectorAll(".Setting");
for (let i = 0; i < x.length; i++) {
x[i].style.gridTemplateColumns = settings[which].gridTemplateColumns;
}
}

body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: grey;
}
.hr {
display: flex;
flex-direction: row;
align-items: center;
}
.Medium {
margin: 0 15px;
}
.Container {
background-color: white;
display: flex;
flex-direction: column;
align-items: center;

/* Here is the transition */
transition: 0.9s;
}
.Setting {
align-items: stretch;
grid-template-columns: repeat(2, minmax(200px, 1fr));
grid-column-gap: 30px;
grid-row-gap: 30px;
display: grid;
text-align: left;
}
.Content {
width: 200px;
height: 120px;
background-color: blue;
}

<div class="hr">
<button class="Desktop" onclick="resize('Desktop')">Desktop</button>
<button class="Medium" onclick="resize('Tablet')">Tablet</button>
<button class="Full" onclick="resize('Phone')">Phone</button>
</div>
<div class="Container">
<p>This is Heading</p>
<p>Some text will appear here</p>
<div class="Setting">
<div class="Content"></div>
<div class="Content"></div>
<div class="Content"></div>
<div class="Content"></div>
</div>
</div>

Answer 1

如果将过渡的初始宽度设置为从开始，您将获得想要的效果。当转换通过从开始到结束的值时，如果没有明确的第一个属性，转换将不会运行。请参阅下面对.container类的更改。

const settings = {
Desktop: {
width: "100%",
gridTemplateColumns: "repeat(2,minmax(200px,1fr))"
},
Tablet: {
width: "60%",
gridTemplateColumns: "repeat(1,minmax(200px,1fr))"
},
Phone: {
width: "30%",
gridTemplateColumns: "repeat(1,minmax(200px,1fr))"
}
}
function resize(which) {
let x = document.querySelectorAll(".Container");
for (let i = 0; i < x.length; i++) {
x[i].style.width = settings[which].width;
}
x = document.querySelectorAll(".Setting");
for (let i = 0; i < x.length; i++) {
x[i].style.gridTemplateColumns = settings[which].gridTemplateColumns;
}
}

body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: grey;
}
.hr {
display: flex;
flex-direction: row;
align-items: center;
}
.Medium {
margin: 0 15px;
}
.Container {
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
width: 430px;
transition: width 0.9s;
will-change: width;
}
.Setting {
align-items: stretch;
grid-template-columns: repeat(2, minmax(200px, 1fr));
grid-column-gap: 30px;
grid-row-gap: 30px;
display: grid;
text-align: left;
}
.Content {
width: 200px;
height: 120px;
background-color: blue;
}

<div class="hr">
<button class="Desktop" onclick="resize('Desktop')">Desktop</button>
<button class="Medium" onclick="resize('Tablet')">Tablet</button>
<button class="Full" onclick="resize('Phone')">Phone</button>
</div>
<div class="Container">
<p>This is Heading</p>
<p>Some text will appear here</p>
<div class="Setting">
<div class="Content"></div>
<div class="Content"></div>
<div class="Content"></div>
<div class="Content"></div>
</div>
</div>