Question

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

开http://maginaire.concept9.ca/我想让标识调整到更小/更大的尺寸，并在达到768px（或其他断点）以下的屏幕尺寸时以更平滑的方式显示（不是跳跃）。但是，在应用转换之前，我仍然会在整个地方获得徽标 - 这是我正在谈论的一个例子：https://www.youtube.com/watch?v=FfYfSndF54I&feature=youtu.be。

这是徽标的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结束时加载它 - 但没有运气:(。

谢谢！丹。

Answer 1

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

但我有一个问题要问你。这有什么实际用途？假设我在手机上查看您的页面，没有动画在徽标上呈现。我在那里迷茫。

试试这个。

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.
    }
}

CSS：在断点处应用转换

1 个答案: