小贝子编程

改变大小的SVG标志动画或过渡



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

<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'); }
    });
}

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

我更新了CSS代码与过渡@Evan提到的和工作。非常感谢!

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium