英文:
Transition with flexbox css
问题
在给定的 CSS 样式表中，我想要为 justify-content 添加过渡效果，将其值从左侧更改为居中。但即使为 nav 使用了 transition: all 1s;，从左侧到中心的变化仍然是突然的。但过渡效果已正确应用于 h1 的文本颜色和背景颜色。
为什么会发生这种情况，以及如何纠正这个问题？
我尝试使用 margin 作为解决方法，但这不是一个理想的解决方案。
英文:
In the given css style sheet I want to add transition effect to the justify-content, changing its value from left to center. But the change from left to center is abrupt even after using transition:all 1s; for nav. However the transition is applied to h1's text color and background's color properly.<br>
Why it is happening and how to correct this?
body{
background-color: white;
transition:all 1s;
}
img{
width:30%;
}
div{
display:flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
align-items:center;
}
nav{
text-transform: uppercase;
border-bottom:1px solid #c6bebe;
padding:10px;
margin:15px 0px 15px 30px;
font-family: Raleway,sans-serif;
font-size:30px;
display: flex;
justify-content:left;
transition:all 2s;
}
h1{
font-size: 40px;
font-weight: 900;
transition:all 1s;
}
@media (max-width:950px){
body{
background-color: rgb(28, 27, 27);
}
div{
flex-direction: column;
}
img{
width: 100%;
margin:5px;
}
nav{
justify-content: center;
}
h1{
color:rgb(255, 255, 255);
}
}
I tried to use margin as a turnaround but it is not an ideal solution.
答案1
得分: 1
justify-content 在 "left" 和 "center" 之间没有中间值，不能在过渡期间平滑动画。您可以尝试使用 transform 属性代替 justify-content，将导航元素从左侧移动到中心。
英文:
justify-content doesn't have any intermediate values between "left" and "center" to animate smoothly during the transition. You can try using the transform property instead of justify-content to move the nav element from left to center.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论