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

【问题标题】：Changing size of SVG logo animated or with transition改变 SVG 标志的大小动画或过渡
【发布时间】：2014-10-15 05:05:08
【问题描述】：

当用户向下滑动页面时，我正在使用以下代码更改徽标的大小。我试图在 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; }

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

【问题讨论】：

你试过修改.tm-navbar img { -webkit-transition: height .2s; } 吗？
@above，您首先需要设置一个高度来进行过渡。也应该使用 SVG jsfiddle.net/o9k1ja2q

标签： css svg css-transitions css-animations

【解决方案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 代码并工作了。非常感谢！

【讨论】：