html - CSS : Applying Transitions at Breakpoints

Question

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

关于 http://maginaire.concept9.ca/我想让 Logo 调整到更小/更大的尺寸，并在屏幕尺寸低于 768 像素(或其他断点)时以更平滑的方式(而不是跳动)显示。但是，在应用转换之前，我仍然看到 Logo 到处都是 - 这是我正在谈论的示例:https://www.youtube.com/watch?v=FfYfSndF54I&feature=youtu.be .

这是 Logo 的 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; }

还验证了在没有转换的情况下 Logo 是否正确显示(在 767/768/769px)并且我还尝试在我的 css 末尾加载它 - 但没有运气 :(。

谢谢!! 丹.

Answer 1

所以这里发生的是你的@media 查询在你的动画开始之前开始，因此是“跳跃”。更改过渡发生的顺序。例如，从 800 像素开始播放动画，当浏览器调整到 768 像素时，动画已完成， Logo 已就位且过渡流畅。

但是我有一个问题要问你。这有什么实际用处？假设我正在手机上查看您的页面， Logo 上没有呈现任何动画。小儿很困惑。

试试这个。

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