Question

我正试图平滑这个自定义动画。 See Working Animation Here.

我遇到的问题是，当城市名称旋转并替换旧城市名称时，文本对齐中心会使h2文本在一帧中重新对齐中心。我希望平滑这种转变，使其缓和到对齐中心，而不是仅仅跳到它。

我希望这个解释有所帮助。这是我的代码。

HTML

<div class="coverage">
    <h2>Kellin has service in&nbsp;<span class="flip"></span></h2>
    <ul class="coverage_list">
        <li>Larkspur</li>
        <li>Castle Rock</li>
        <li>Monument</li>
        <li>Palmer Lake</li>
        <li>Colorado Springs</li>
        <li>Pueblo</li>
        <li>Peyton</li>
        <li>Falcon</li>
        <li>Calhan</li>
        <li>Franktown</li>
        <li>Elizabeth</li>
        <li>Elbert</li>
        <li>Glenwood Springs</li>
        <li>Rifle</li>
        <li>Silt</li>
        <li>El Jebel</li>
        <li>Carbondale</li>
        <li>New Castle</li>
        <li>Parachute</li>
        <li>Battlement</li>
    </ul>
</div><!-- end .coverage -->

CSS

/* Coverage Banner */
.coverage{
    border: 2px solid #333;
    width: 100%;
}
.coverage ul.coverage_list{
    display: none;
}
.coverage h2{
    font-size: 2em;
    font-weight: 700;
    padding: 0px;
    margin:0px;
    overflow: hidden;
    display: block;
    text-align: center;
    white-space: nowrap;
}
.coverage h2 .flip{
    display: inline-block;
    position: relative;
    padding: 0px;
    margin: 0px;
}
.coverage h2 .flip .current{
    position: relative;
    left:0;
    display: inline-block;
    text-align: left;
    width: 100%;
    padding: 0px;
    margin: 0px;
}
.coverage h2 .flip .newcity{
    position: absolute;
    display: inline-block;
    text-align: left;
    white-space: nowrap;
    left: 0;
    padding: 0px;
    margin: 0px;
}

JS / Jquery

var coverageVars = {
    index : 1,
    count : 0,
    flipTime : 500
}

// .current = Current City, position relative
// .newcity = New City, position absolute;

$(document).ready(function(){

    // Load First City Into H2 Display
    var firstCity = $('ul.coverage_list li:nth-child(1)').html();
    $('.coverage h2 .flip').append('<span class="current">'+firstCity+'!</span>');

    // Get Count
    coverageVars.count = $('ul.coverage_list').children('li').length;

    var flipTimer = setInterval(function(){

        // Increase Counter
        if( coverageVars.index < coverageVars.count ){
            coverageVars.index += 1;
        } else {
            coverageVars.index = 1;
        }

        // Get City Names
        var currentCity = $('.coverage h2 .flip .current').html();
        var newCity = $('ul.coverage_list li:nth-child('+coverageVars.index+')').html();

        // Append newcity span to flip element
        $('.coverage h2 .flip').append('<span class="newcity" style="top:50px;">'+newCity+'!</span>');
        $('.coverage h2 .flip .current').animate({top:'-50px'}, coverageVars.flipTime, function(){
            $(this).remove();
        });
        $('.coverage h2 .flip .newcity').animate({top:0}, coverageVars.flipTime, function(){
            console.log('done!');
            $(this).removeClass('newcity').addClass('current');
        });

    }, 1500);

});

我认为我必须与边距对齐，然后在边距上进行css过渡，但我无法弄明白。谢谢你的帮助。

Answer 1

另一个想法：

获取<h2>（不含.flip）
获取将要追加的下一个<li>的宽度。对于此.coverage_list，无法设置为display: none，但您可以将height: 0和overflow设置为hidden。
将<h2>设置为新宽度（<h2> + <li>）。由于浏览器渲染，可能会增加1-2个像素
重复步骤＃2和＃3，并在附加

在中心对齐动画而不使用文本对齐中心

1 个答案: