Question

我尝试设置调整大小菜单的动画，它会激活div，但不会调整图像的大小。当我向下滚动时，div有一个很好的过渡，但图像会立即调整大小。

还需要为要应用于图像的过渡添加什么？

HTML标记：

<div class="col-md-3 logo">
    <img class="image" src="<?php bloginfo('template_url'); ?>/images/logo-svg.svg">
</div>
<?php wp_nav_menu(array('menu' => 'main','menu_class'=> 'meniu col-md-7 col-md-offset-2')); ?>

JS：

$(document).on("scroll",function(){
if($(document).scrollTop()>100){
    $("header").addClass("small");
    $(".logo img").addClass("img-small");
    $("ul.meniu").addClass("small-nav")
} else{
    $("header").removeClass("small");
    $(".logo img").removeClass("img-small");
    $("ul.meniu").removeClass("small-nav")
}

CSS：

.img-small{
    width: 160px;
    -webkit-transition-duration: 5s;
}

.small{
    height: 100px;
}

.small-nav{
    margin-top: 60px;
}

Answer 1

由于您在width应用之前未为图片指定height或.small，因此默认为auto（在本例中为“图像的原始大小“）。

auto无法转换。

解决方案：在图片的CSS中指定width和height，这将被覆盖并因此被班级转换。

css3动画不适用于图像

1 个答案: