Question

当用户向下滑动页面时，我使用以下代码更改徽标的大小。我试图在SVG尺寸变化中添加转换延迟而没有运气。你能帮我吗？

HTML

<nav class="tm-navbar">
<div class="uk-container uk-container-center">
<div class="tm-navbar-center">
<div class="tm-nav-logo uk-hidden-small">
<a class="tm-logo uk-hidden-small" href="#">
<img class="uk-responsive-height uk-responsive-width" src="/images/logo.svg">
</a>
</div>
</div>
</div>
</nav>

CSS

.tm-navbar-fixed.tm-navbar-animated .tm-navbar img { height: 110px; }
.tm-navbar-fixed.tm-navbar-animated .tm-navbar-small img { height: 70px; }

JS

// Fullscreen image & transparent fixed menu
var fn              = function(){},
    win            = $(window),
    body            = $('body'),
    navbar          = $('.tm-navbar');

if(body.hasClass('tm-navbar-fixed')) {
    win.on('scroll', function() {
        if (win.scrollTop() > 0) { navbar.addClass('tm-navbar-small'); } 
        else { navbar.removeClass('tm-navbar-small'); }
    });
}

Answer 1

CSS

.tm-navbar-fixed.tm-navbar-animated .tm-navbar img { height: 110px; transition: height .2s; }
.tm-navbar-fixed.tm-navbar-animated .tm-navbar-small img { height: 70px; }

我用过渡@Evan提到并更新了CSS代码。非常感谢！

更改动画或过渡的SVG徽标的大小

1 个答案: