jquery - 图像上人造裁剪的 CSS 过渡

Question

我正在处理一个带有位于导航栏上方的 Logo 的页眉。当用户开始向下滚动页面时，页眉会通过 CSS 转换缩小， Logo 会被“裁剪”，其位置会移动以适应缩小的页眉。这真的很好用。但是，我正在尝试找到一种方法来为 Logo 上的“裁剪”设置动画。我目前得到的是动画 Logo 的重新定位。

这是一个 fiddle :https://jsfiddle.net/3ehg1hLf/

是否可以在 Logo 类上放置一个过渡动画，使其动画化而不是它的位置？

我的HTML如下:

<div class="container-fluid no-pad">
<div class="navbar navbar-fixed-top">
    <div class="row xyz">

        <div class="col-xs-4">
            <span class="logo"><img src="http://i.imgur.com/5MchhVA.png?1" /></span>
        </div>

    </div>
</div>

CSS:

body {
    margin: 0;
    border: 0;  
}

.no-pad {
    padding: 0;
}


.xyz {
    max-width: 1280px;
    height: 91px;
    background: blue;
    color: #fff;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
    /* For Scroll Transition */
    -webkit-transition: all .4s ease-out;
    -moz-transition: all .4s ease-out;
    -o-transition: all .4s ease-out;
    transition: all .4s ease-out;
}

.col-xs-4 {
  padding-top: 3px;
}

.cropxyz {
            height: 50px;
        }

    .logo {
            width: 100%;
        }

        .crop360 {
            display: inline-block;
            width:129px;
            height:36px;
            overflow:hidden;
            margin-top: 8px;
            /* For Scroll Transition*/
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            -o-transition: all .4s ease-in;
            transition: all .4s ease-in; 
        }

        .crop360 img {
            position:relative;
            /*width: 100%;*/
            top: 40%;
            transform: translateY(-50%);

        }

Answer 1

我是这样做的:

• 使用带有 background-image 的 logo 元素代替 img 元素
• 在“更小”模式下，降低元素的高度
• background-position:center 确保裁剪顶部和底部

例子: https://jsfiddle.net/scnfbzek/