Question

这是情况。我有三个字，但只有一个是可见的，每边有一个支架。像这样：

[猫]

然后括号会相互滑动，露出另外两个词：

[狗猫牛]。

这是逐帧的：

1 [Cat]

2 [g Cat C]

3 [og Cat Co]

4 [狗猫奶牛]

但显然，我希望每个帧之间的过渡更加平滑。理想情况下，“猫”这个词会在括号滑开时留在同一个地方，露出其他词语。

我在网络上的动画方面非常缺乏经验，所以如果你能解释为达到这个效果我需要采取的步骤，我会很感激。

谢谢！

Answer 1

hacky no-jquery解决方案

http://jsfiddle.net/Ccheu/

基本上使用带有下面文本的div，以及它上面的三个div。左边和右边是不透明的（因此隐藏了文本的左右部分），中间的那些没有背景和空（因此显示通过）。通过改变中间宽度来完成动画。

HTML：

<div id="container">
    <div id="content">
        Dog Cat Cow
    </div>
    <div id="mask"><div id="leftm">[</div><div id="middle"></div><div id="rightm">]</div></div>
</div>
<br><br><br>
<input type=button value="click me" id="doit">

CSS：

#container {
    position: relative;
    display: inline-block;
    font-size: 20px;
    width: 300px;
}

#content {
    text-align: center;
}

#mask {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    text-align: center;
    white-space: nowrap;
}

#leftm {
    display: inline-block;
    background-color: #FFF;
    text-align: right;
    width: 60px;
}

#middle {
    display: inline-block;
    width: 30px;
}

#rightm {
    display: inline-block;
    background-color: #FFF;
    text-align: left;
    width: 60px;
}

使用Javascript：

doit.onclick = function() {
    var w = 30;
    function step() {
        if (w < 120) {
            middle.style.width = (w++) + "px";
            setTimeout(step, 20);
        }
    }
    setTimeout(step, 200);
};

Answer 2

你去：http://jsfiddle.net/8PBW8/1/

$('button').click(function(){
    $('#container').animate({width:'100px'},2000);
    $('#text').animate({marginLeft:'0px'},2000);
    $('#wrapper').animate({marginLeft:'-200px'},2000);
});

你需要将你的文本分成几部分以便让它工作，看到小提琴中的代码，我想很明显，如果对代码有任何疑问，请问我！

<div id="wrapper">
    <div id="bracketLeft">[</div>
    <div id="container">
        <div id="text">Dog Cat Cow</div>
    </div>
    <div id="bracketRight">]</div>
</div>

以下是CSS以防万一：

div{
    display:inline-block;
    height:23px;
    line-height:30px;
}
#text{
    width:100px;
    text-align:center;
    margin-left:-34px;
}
#container{
    width:26px;
    overflow:hidden;
}
#wrapper{
    display:block;
    width:300px;
    position:absolute;
    left:50%;
    margin-left:-150px;
}

Answer 3

这是我使用transition效果编码的非常基本的解决方案。您可能希望将其更改为animation，但我并不觉得它会因为输入所有浏览器动画类型所需的时间而提高我的答案。

http://jsfiddle.net/xXAa8/

这种方法的工作方式（可以很容易地改变）是，当您将鼠标悬停在logo div上时，两个expand divs会在宽度上增长。左侧expand div已将文字方向设置为rtl，因此文本的右侧将首先显示。

HTML

<div class="logo">
    <div class="expand left">Dog</div>
    <div class="visible">Cat</div>
    <div class="expand right">Cow</div>
</div>

样式表

.logo {
    width: 100%;
}
.logo .expand {
    overflow: hidden;
    width: 0px;
    transition: width 0.5s linear;
}
.logo:hover .expand {
    width: 30px;   
}
.logo > div {
    float: left;
    margin: 0px 3px;
}
.logo .expand.left {
    direction: rtl;
}

一个不寻常的请求：我需要帮助动画文本

3 个答案: