Html CSS：在断点处应用转换

我正在尝试应用转换，使媒体查询断点更加平滑

在上，我想让徽标调整到更小/更大的尺寸，并在屏幕大小小于768px（或其他断点）时以更平滑的方式显示（不跳跃）。然而，在应用转换之前，我仍然会发现徽标有点到处都是——下面是我所说的一个例子：

这是徽标的CSS（应用于任何媒体查询之外，因为我希望它应用于所有断点），我有：

logos .project {
-moz-transition: width 0.5s ease-in-out, left 0.5s ease-in-out;
    -webkit-transition: width 0.5s ease-in-out, left 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out, left 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out, left 0.5s ease-in-out;
    transition: width 0.5s ease-in-out, left 0.5s ease-in-out;
}

这是767px及以下的介质查询：

@media only screen and (min-width: 640px) and (max-width: 767px) {
#logos { margin-left: 0!important; }
#logos .project { float: left!important; width: 100px!important; }
#logos .project, #logos .project:nth-child(2n) { margin-right: 0px!important; }
#logos .project:nth-child(2n+1) { clear: none!important; }
#logos .project:nth-child(4n) { margin-right: 0!important; }
#logos .project:nth-child(4n+1) { clear: both!important; }



.et_pb_portfolio_item { 
float: left;
width: 225px; 
margin: 0px 13px 0px 0 !important; 
    }

对于以上内容：

@media only screen and (min-width: 768px) and (max-width: 959px) {
#logos { margin-left: 0!important; }
#logos .project { width: 125px!important; }
#logos .project:nth-child(2n) { margin-right: 60px!important; }
#logos .project:nth-child(2n+1) { clear: none!important; }
#logos .project:nth-child(4n) { margin-right: 0!important; }
#logos .project:nth-child(4n+1) { clear: both!important; }

还验证了在没有转换的情况下徽标是否正确显示（767/768/769px），我还尝试在css末尾加载它，但没有成功：（

谢谢！！

---

Dan。

因此，这里发生的是在动画开始之前，您的@media查询启动了，因此出现了“跳跃”。更改转换发生的顺序。例如，在800px启动动画，当浏览器调整到768px时，动画已完成，徽标已就位，转换平稳

但我有个问题想问你。这到底有什么用？假设我在手机上查看你的页面，没有在徽标上呈现的动画。lil对此感到困惑

试试这个

window.addEventListener("resize", myFunction);

function myFunction() {
    if(window.innerWidth < 800){
        //Start the animation here
        //But also make sure the logos go to their respective positions after the animation has been rendered.
    }
}

window.addEventListener（“resize”，myFunction）；
函数myFunction（）{
如果（窗内宽度<800）{
//在这里开始动画
//但也要确保徽标在动画渲染后回到各自的位置。
}
}

可能需要更多的css和html，也许还需要一个例子来说明这个问题。这对我们会有很大帮助。事实上-添加了一些css和一个视频，我知道这个问题，对吧？非常没有意义，试图向客户解释我在做这个网站，因为访问者很少会调整网站的大小，以至于它陷入另一个崩溃oint…但他仍然希望断点之间的过渡尽可能平滑…我该怎么做你的建议？因为动画本身只有在屏幕大小落入另一个媒体查询时才开始不？请尝试上面的代码。我认为应该可以。但我建议你试着向你的客户解释这是一个问题浪费时间。