Question

我会尝试解释我正在尝试做什么，但我认为查看jsfiddle链接会更清楚地说明这一点。

这是一些相互垂直堆叠的短语（HTML div）。单击该按钮时，顶部短语消失，而较低的短语似乎向上滑动以取代之前自己的短语。

有更好的方法吗？它看起来真的很难看。

编辑：还要注意代码只能运行一次，然后你必须再次点击“运行”，因为短语列表不像我的实际应用程序那样是无限的

HTML：

<br>
<br>
<br>
<div id="phrase1" style="font-size:50px;color:black">Phrase 1</div>
<div id="phrase2" style="font-size:25px;color:gray">Phrase 2</div>
<div id="phrase3" style="font-size:25px;color:gray">Phrase 3</div>
<div id="phrase4" style="font-size:25px;color:gray;opacity:0">Phrase 4</div>
<br>
<br>
<br>
<button id="button" onclick="myFunc2()" onmousedown="myFunc()">CLICK ME</button>

的javascript：

document.getElementById('phrase2').addEventListener("webkitAnimationEnd", switchPhraseText);


function switchPhraseText() {
    document.getElementById('phrase1').innerHTML = "Phrase 2";

    document.getElementById('phrase2').innerHTML = "Phrase 3";

    document.getElementById('phrase3').innerHTML = "Phrase 4"; 

    document.getElementById('phrase4').innerHTML = "Phrase 5"; 
}

function myFunc2() {
    document.getElementById('phrase1').style.webkitAnimationName = 'phrase1Anim';

    document.getElementById('phrase2').style.webkitAnimationName = 'phrase2Anim';

    document.getElementById('phrase3').style.webkitAnimationName = 'phrase3Anim';

    document.getElementById('phrase4').style.webkitAnimationName = 'phrase4Anim';


}

function myFunc() {
    document.getElementById('phrase1').style.webkitAnimationName = "";
    document.getElementById('phrase2').style.webkitAnimationName = "";
    document.getElementById('phrase3').style.webkitAnimationName = "";
    document.getElementById('phrase4').style.webkitAnimationName = "";
}

的CSS：

#phrase1 {
    position: relative;
    -webkit-animation-duration: .8s; 
}

#phrase2 {
    position: relative;
    -webkit-animation-duration: 1s; 
}

#phrase3 {
    position: relative;
    -webkit-animation-duration: 1s; 
}

#phrase4 {
    position: relative;
    -webkit-animation-duration: 1s; 
}


@-webkit-keyframes phrase1Anim {
    0%   {left:0px;}
    100% {left:250px; opacity:0}
}

@-webkit-keyframes phrase2Anim {
    0%   {font-size:25px; top:0px;}
    100% {color:black; font-size:50px; top:-50px;}
}

@-webkit-keyframes phrase3Anim {
    0%   {top:0px;}
    100% {top:-50px;}
}

@-webkit-keyframes phrase4Anim {
    0%   {top:0px;}
    100% {top:-50px; opacity:1;}
}

Answer 1

这将支持列表中的无限量元素。当然，它并不完美，你必须根据自己的需要调整它，但希望它能让你开始。我认为代码非常自我解释。

这仅适用于当前状态的Chrome，但要在其他浏览器中使用，您只需将相关的供应商前缀添加到CSS规则和动画事件中即可。 对于多浏览器支持，只需添加相关的CSS后备和监听器修复。

使用类active
它克隆了所述元素并将其推到底部，使其褪色。
删除克隆并附加原始克隆（因为克隆仅用于美学）
它为active旁边的元素设置动画（向上，字体大小，颜色）。

<强> jsFiddle for Chrome
jsFiddle for Firefox（显然，FF很棒，不需要供应商前缀）。

最后，这是代码段形式的Chrome版本：

var phrases = document.getElementById('phrases'),
    next = document.getElementById('next'),
    ongoing = false;

function animList() {
    var active = document.getElementsByClassName('active')[0],
        next = active.nextElementSibling,
        clone;
    
    if(ongoing) return;
    
    ongoing = true;
  
    function animationStart() {
        clone = this.cloneNode(true);
        clone.id = '_tmp';
        clone.className = '';
        clone.style.transition = 'opacity 1s';
        clone.style.opacity = '0';
        setTimeout(function () { clone.style.opacity = '1' }, 50);
        phrases.appendChild(clone);
        this.removeEventListener('webkitAnimationStart', animationStart);
    }
    function animationEnd() {
        clone.parentNode.removeChild(clone);
        phrases.appendChild(active);
        this.classList.remove('active', 'animActive', 'slideUp');
        this.removeEventListener('webkitAnimationEnd', animationEnd);
        this.removeEventListener('webkitAnimationStart', animationStart);
        next.classList.remove('slideUp');
        next.classList.add('active');
        ongoing = false;
    }
    active.classList.add('animActive');
    next.classList.add('slideUp');
    active.addEventListener('webkitAnimationStart', animationStart);
    active.addEventListener('webkitAnimationEnd', animationEnd);
}
    
next.onclick = animList;

#next {
    position: relative;
    display: inline-block;
    top: 2.5em;
    background: transparent;
    border: 0;
    font-size: 2em;
}
#phrases {
    display: inline-block;
    vertical-align: top;
    max-height: 11em;
}
#phrases div {
    font-size: 2em;
    color: gray;
    position: relative;
}
#phrases div.active {
    font-size: 3em;
    color: black;
}
.animActive {
    -webkit-animation: animActive 1s ease-in-out;
}
.slideUp {
    -webkit-animation: slideUp 1s;
}
#phrases div.slideUp ~ div:nth-child(n+3) {
    -webkit-animation: slideUpRest 1s;
}
@-webkit-keyframes animActive {
    0%   { 
        left: 0; 
    }
    100% { 
        left: 4em;
        opacity: 0 
    }
}

@-webkit-keyframes slideUp {
    0%   { 
        top: 0;
    }
    100% { 
        top: -1.15em;
        font-size: 3em;
        color: black;
    }
}
@-webkit-keyframes slideUpRest {
    0%   { 
        top: 0;
    }
    100% { 
        top: -1.7em; 
    }
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>

    <div id="phrases">
        <div id="phrase1" class="active">Phrase 1</div>
        <div id="phrase2">Phrase 2</div>
        <div id="phrase3">Phrase 3</div>
        <div id="phrase4">Phrase 4</div>
        <div id="phrase5">Phrase 5</div>
    </div>
    <button id="next">
        <i class="fa fa-angle-right"></i>
    </button>

平滑地滑动HTML divs以互相替换

1 个答案: