機能は一度だけ

私は4つのボタン、ボタン1を持って実行すると、アニメーションをトリガーする必要があり、ボタン2は、しかし、小さなCSSのキャッチで、この作品、そのアニメーションを逆にする必要があります。（私はdiv要素は、ボタンをクリックすることで元の位置に戻し来てほしいです2、最初に表示されていない、アニメーションされている、私はこれも解決策について幸せだろう）。機能は一度だけ

Nowボタン3ボタン4が元の位置に戻し、それらをもたらし、飛び出しためにdivを引き起こすが、このプロセスは一度だけ動作します。

は私が私が、「要素」が定義されていない参照エラーが出るが、時には、スローされたエラーはありません、以下の機能が

function animationTwo() { 
    var div1 = document.querySelector('.inner1'); 
    var div2 = document.querySelector('.inner2'); 
    var div3 = document.querySelector('.inner3'); 
    var div4 = document.querySelector('.inner4'); 

    removeAllClasses('div1', 'div2', 'div3', 'div4'); 

    setTimeout(function() { 
     addClass(div1, 'outTopLeft'); 
     addClass(div2, 'outTopRight'); 
     addClass(div3, 'outTopRight'); 
     addClass(div4, 'outTopRight'); 
    }, 100); 
} 

function reverseAnimationTwo() { 
    var div1 = document.querySelector('.inner1'); 
    var div2 = document.querySelector('.inner2'); 
    var div3 = document.querySelector('.inner3'); 
    var div4 = document.querySelector('.inner4'); 

    removeAllClasses('div1', 'div2', 'div3', 'div4'); 

    setTimeout(function() { 
     addClass(div1, 'inAgain'); 
     addClass(div2, 'inAgain'); 
     addClass(div3, 'inAgain'); 
     addClass(div4, 'inAgain'); 
    }, 100); 
}

時々クリックでトリガーがあります。ページのリフレッシュ後も常に機能します。ここで

はアドオンであり、上記の機能で呼び出されたクラスの機能を削除します。

function addClass(element, classToAdd) { 
    var currentClassValue = element.className; 
    if (currentClassValue.indexOf(classToAdd) == -1) { 
     if ((currentClassValue == null) || (currentClassValue === "")) { 
      element.className = classToAdd; 
     } else { 
      element.className += " " + classToAdd; 
     } 
    } 
} 

function removeAllClasses(el, el, el, el) { 
    var currentClassValue = el.className; 
    el.className = ""; 

};

もう一つは、トリガされた1つのように、私はそれぞれのdivのために互い違いに配置されるアニメーションを持っていると思い、あります最初のボタンをクリックしても、ループもコールバックも成功しませんでした。ボタン3と4をクリックするとスクロールバーが表示されますが、どうすればこれらを回避できますか？これはJSとCSSの質問が混在していることを知っています。ペンに

リンク：

http://codepen.io/damianocel/pen/QdKyzm

出典

2017-01-22 ptts

を働いているあなたは、 'reverseAnimationOne' –

サイドと呼ばれる二つの機能を持っているように見えます注意： 'Element.classList' propteries' aを使う方法を学ぶCSSクラスに – Satpal

@JohnHascallを追加および削除するDD（） '＆'削除（） 'メソッド、おかげで、私はまだ、すべて同じかかわらず、それらのいずれかを削除しました。私は寒さがElement.classListですべてのクラスを削除するのに良い何かを思い付いていないので、欠陥のあるclassNameプロパティに行ってきました。そのための解決策があれば、私はそれについて学ぶことができます。 – ptts

あなたremoveAllClasses(el,el,el,el)機能を変更した後、それは

var aniOne = document.getElementById('move'); 
 
var aniOneReversed = document.getElementById('moveBack'); 
 
var aniTwo = document.getElementById('move2'); 
 
var aniTwoReversed = document.getElementById('moveBack2'); 
 
aniOne.addEventListener('click', function() { 
 
    animationOne(); 
 
}); 
 
aniOneReversed.addEventListener('click', function() { 
 
    reverseAnimationOne(); 
 
}); 
 
aniTwo.addEventListener('click', function() { 
 
    animationTwo(); 
 
}); 
 
aniTwoReversed.addEventListener('click', function() { 
 
    reverseAnimationTwo(); 
 
}); 
 
function animationOne() { 
 
    var allDivs = document.querySelectorAll('div'); 
 
    [].forEach.call(allDivs, function (allDivs, i) { 
 
     allDivs.classList.remove('animationOneReversed'); 
 
     setTimeout(function() { 
 
      allDivs.classList.add('animationOne'); 
 
     }, 100 * i); 
 
    }); 
 
} 
 
function reverseAnimationOne() { 
 
    var allDivs = document.querySelectorAll('div'); 
 
    [].forEach.call(allDivs, function (allDivs, i) { 
 
     allDivs.classList.remove('animationOne'); 
 
     setTimeout(function() { 
 
      allDivs.classList.add('animationOneReversed'); 
 
     }, 100 * i); 
 
    }); 
 
} 
 
function animationTwo() { 
 

 
    var div1 = document.querySelector('.inner1'); 
 
    var div2 = document.querySelector('.inner2'); 
 
    var div3 = document.querySelector('.inner3'); 
 
    var div4 = document.querySelector('.inner4'); 
 
    removeAllClasses(div1); 
 
\t removeAllClasses(div2); 
 
\t removeAllClasses(div3); 
 
\t removeAllClasses(div4); 
 
    setTimeout(function() { 
 
     addClass(div1, 'outTopLeft'); 
 
     addClass(div2, 'outTopRight'); 
 
     addClass(div3, 'outTopRight'); 
 
     addClass(div4, 'outTopRight'); 
 
    }, 100); 
 
} 
 
function reverseAnimationOne() { 
 
    var allDivs = document.querySelectorAll('div'); 
 
    [].forEach.call(allDivs, function (allDivs, i) { 
 
     allDivs.classList.remove('animationOne'); 
 
     setTimeout(function() { 
 
      allDivs.classList.add('animationOneReversed'); 
 
     }, 100 * i); 
 
    }); 
 
} 
 
function reverseAnimationTwo() { 
 
    var div1 = document.querySelector('.inner1'); 
 
    var div2 = document.querySelector('.inner2'); 
 
    var div3 = document.querySelector('.inner3'); 
 
    var div4 = document.querySelector('.inner4'); 
 
    
 
    setTimeout(function() { 
 
     addClass(div1, 'inAgain'); 
 
     addClass(div2, 'inAgain'); 
 
     addClass(div3, 'inAgain'); 
 
     addClass(div4, 'inAgain'); 
 
    }, 100); 
 
} 
 
function addClass(element, classToAdd) { 
 
    var currentClassValue = element.className; 
 
    if (currentClassValue.indexOf(classToAdd) == -1) { 
 
     if (currentClassValue == null || currentClassValue === '') { 
 
      element.className = classToAdd; 
 
     } else { 
 
      element.className += ' ' + classToAdd; 
 
     } 
 
    } 
 
} 
 
function removeAllClasses(el) { 
 
    var currentClassValue = el.className; 
 
\t currentClassValue=currentClassValue.split(" "); 
 
\t if(currentClassValue[1]!=""){ 
 
\t \t el.className = currentClassValue[0]; 
 
\t } 
 
    
 
}

.wrapper { 
 
    perspective: 800px; 
 
    position:relative; 
 
    
 
    margin:0 auto; 
 
    width:1000px; 
 
    height:500px; 
 
    border:black 10px solid; 
 
    padding:30px; 
 
} 
 

 
.wrapperInner { 
 
    position:relative; 
 
    
 
    width:100%; 
 
    height:500px; 
 
    transform-style: preserve-3d; 
 
    transition: transform 1s; 
 
    
 
    margin: 0 auto; 
 
    
 
    padding: 30px; 
 
    
 
} 
 

 

 
div { 
 
    
 
    
 
    height:40%; 
 
    width:40%; 
 
    background-image: url(http://scontent.cdninstagram.com/t51.2885-15/e35/12728470_425209597603876_513397964_n.jpg?ig_cache_key=MTE5MDA5Nzg0MjkxOTc4NTAzNg%3D%3D.2); 
 
    background-size: 100% 100%; 
 
    border:2px pink solid; 
 
    margin:40px; 
 
    
 
} 
 

 
.inner1 { 
 
    position:absolute; 
 
    top:0px; 
 
    left:0; 
 
} 
 
.inner2 { 
 
    position:absolute; 
 
    top:0px; 
 
    right:0; 
 
} 
 
.inner3 { 
 
    position:absolute; 
 
    bottom:0px; 
 
    left:0; 
 
} 
 
.inner4 { 
 
    position:absolute; 
 
    bottom:0px; 
 
    right:0; 
 
} 
 

 
@keyframes turner{ 
 
    0% { transform:rotateY(0deg); } 
 
    15% { transform:rotate(360deg); } 
 
    40% { transform:skew(23deg,22deg); } 
 
    50% { transform:translateX(50%);} 
 
    60% { transform:skew(-23deg,-22deg);} 
 
    70% { transform:translateX(-250%);} 
 
    80% { opacity:.9;} 
 
    100% { transform:scale(0);} 
 
} 
 
@keyframes turnerBack{ 
 
    0% { opacity:0; } 
 
    15% { transform:scale(.3); } 
 
    40% { transform:skew(-23deg,-22deg); } 
 
    50% { transform:translateX(-50%);} 
 
    60% { transform:skew(23deg,22deg);} 
 
    70% { transform:translateX(150%);} 
 
    80% { opacity:1;} 
 
    100% { transform:scale(1);} 
 
} 
 
.animationOne { 
 
    animation: turner 3s 1; 
 
    backface-visibility: visible; 
 
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */ 
 
    animation-fill-mode: forwards; 
 
} 
 
.animationOneReversed { 
 
    
 
    
 
    animation: turnerBack 3s 1; 
 
    backface-visibility: visible; 
 
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */ 
 
    animation-fill-mode: forwards; 
 
} 
 

 
.outTopLeft { 
 
    transition:2s; 
 
    transform:translate(-100%,-100%); 
 
} 
 
.outBottomLeft { 
 
    transition:2s; 
 
    transform:translate(-100%,100%); 
 
} 
 
.outTopRight { 
 
    transition:2s; 
 
    transform:translate(200%,-100%); 
 
} 
 
.outBottomRight { 
 
    transition:2s; 
 
    transform:translate(200%,100%); 
 
} 
 
.inAgain { 
 
    transition:1s; 
 
    transform:translate(0); 
 
}

<button id="move">Click for animation</button> 
 
<button id="moveBack">Click to reverse animation</button> 
 
<button id="move2">Click for animation 2</button> 
 
<button id="moveBack2">Click to reverse animation 2</button> 
 
<section class="wrappper"> 
 
    <section class="wrappperInner"> 
 
    <div class="inner1"></div> 
 
    <div class="inner2"></div> 
 
    <div class="inner3"></div> 
 
    <div class="inner4"></div> 
 
    </section> 
 

 

 
</section>

出典

2017-01-22 16:14:22

素晴らしいです。どのように事業部がずらりと並んで飛ぶことができますか？これはanimationOne関数よりもはるかに難しいと私は知っています。それはゆっくりと私はsettimeoutsでそれを行っているが、それは非常に冗長なようだ – ptts

変更遷移が、私はこれを簡単に行うことができると思うが、それが今で意図したとおりに作業を行い、それをチェックアウト：にhttp：// codepen.io/damianocel/pen/QdKyzm は、私はちょうど遅くアニメーションがないもので、私は異なる時間にアニメーション化するdivを意味しました。 –

をアニメーション化される2秒に – ptts

答えて

関連する問題