CSS 1つの要素の2つの連続するトランジショントランジション

Question

私はVueJSを使用してチェスボードのコンセプトを開発しています。私はエルゴノミを改良しようとしている。

私はプレイヤーのターンとポイント・オブ・ビューを変更するときに簡単にボードをマスクするカーテンの種類を行う必要があります。

• プレイヤー1幕が移動を開始ちょうど
• 宛先ターゲット・四角をクリック画面の上から下へ（CSSクラス+変換：変換）
• ゲームモデルが更新され、ボードが表示
• 幕が落ちるとプレイヤー2が今 を再生することができますのplayzer 2点として表示されます。そのため

にマークアップは次のようになります。

<template> 
    <div class="board"> 
    <div class="board-outline"> 
     <div class="tiles-area" > 
     <tile v-for="tile in tiles" v-bind:tile="tile"></tile> 
     </div> 
    <div class="curtains" 
     v-bind:class="{ 'curtains-out': curtainsOut, 'curtains-in': curtainsIn }"> 
     <div class="fade-out"></div> 
     <div class="opaque"><h1>GET READY !</h1></div> 
     <div class="fade-in"></div> 
    </div> 
    </div> 
</template> 

ゲームの状態はカーテン（アウトやで）のためのクラスも、VueXに格納されます。ボードは72vh * 72vh sqaureサイズです。

これを簡単に達成するにはどうすればよいですか？

よろしく

EDIT [解答]：

私がいた必要があることを

DecadeMoonは、完全なシンプル、およびスタンドアロンの例を書き換え、私に提案するだけでなく、私を助けたよう..

• カーテン（init、out、in、およびreset）が適切な効果を発揮するのに十分な状態。
• 連鎖ここでのコードだ状態での別の

に適切に渡すためのタイマーは、

<template> 
    <section> 
    <div class="board-outline"> 
     <div class="tiles-area"> 
     <h1>It's {{ turn }} turn !</h1> 
     </div> 

     <div class="curtain" v-bind:class="classes"> 
      <div class="transparent-to-opaque"></div> 
      <div class="opaque"> 
      <h1>GET READY, PLAYER {{turn}} !</h1> 
      </div> 
      <div class="opaque-to-transparent"></div> 
     </div> 
    </div> 
    <div class="board-aside"> 
     <h2>simple-curtains-test</h2> 
     <p> 
     to simulate a real-case curtains fall out and leve in in a turn based game like chess, 
     just click the 'source' button first, and then the 'dest' button last 
     </p> 
     <p> 
     <button v-on:click="clickMeFirst">click me first</button> 
     <button v-on:click="clickMeSecond">click me second</button> 
     </p> 
     <p>init : {{ curtain === 'init' }}</p>     
     <p>out : {{ curtain === 'out' }}</p> 
     <p>in : {{ curtain === 'in' }}</p>   
     <p>reset : {{ curtain === 'reset' }}</p>     

    </div> 
    <br class="clearfix" /> 
    </section> 
</template> 

<script> 
export default { 
    name: 'App', 

    data() { 
    // in the real app, these will be stored in Vuex modules 
    return { 
     turn: 'white', 
     first: null, 
     second: null, 
     curtain: 'init' 
    } 
    }, 

    computed: { 

    classes() { 
     return { 
     reset: this.curtain == 'reset', 
     init: this.curtain == 'init', 
     out: this.curtain == 'out', 
     in: this.curtain == 'in' 
     } 
    } 
    }, 

    methods: { 

    clickMeFirst() { 
      // setup source board tile 
     this.first = 'first' 
      this.second = null 
     }, 

     clickMeSecond() { 

      // setup dest board tile 
      this.second = 'second' 

      if(this.first && this.second) { 
      this.curtain = 'out' 

      setTimeout(() => { 
       if(this.turn === 'black') 
       this.turn = 'white' 
       else 
       this.turn = 'black' 

       this.curtain = 'in' 
      }, 500) 

     // reset the curtain 
     setTimeout(() => { 
     this.curtain = 'reset' 
     }, 1000)  

     // reset the curtain 
     setTimeout(() => { 
     this.curtain = 'init' 
     }, 1500) 

     } 

    // reset clicked tiles 
     this.first = null 
     this.second = null   
    } 
    } 
} 
</script> 

<style scoped> 

* { margin: 0; padding: 0vh;} 

section { height:72vh; } 

div.board-outline { 
    position: relative; 
    float: left; 
    height: 72vh; 
    width: 72vh; 
    overflow: hidden; 
} 

div.board-aside { 
    height: 72vh; 
    width: 48vh; 
    float: left; 
    background-color: #ace; 
} 

div.tiles-area { 
    background-color: cyan; 
    height: 72vh; 
    width: 72vh; 
    font-size: 5vh; 
    padding: auto 0; 
} 

br.clearfix { clear: both; } 

div.curtain { 
    float: left; 
    position: absolute; 
    width: 72vh; 
    height: 216vh; 

    -webkit-transition: transform 0.5s; 
    -moz-transition: transform 0.5s; 
    -ms-transition: transform 0.5s; 
    -o-transition: transform 0.5s; 
    transition: transform 0.5s; 

} 

div.transparent-to-opaque { 
    height: 72vh; 
    background: linear-gradient(rgba(0,0,0,0), rgba(0,255,0,255)); 
/* background-color: black ; */ 
} 

div.opaque { 
    height: 72vh; 
    background: rgba(0,255,0,255); 
} 

div.opaque-to-transparent { 
    height: 72vh; 
    background: linear-gradient(rgba(0,255,0,255), rgba(0,0,0,0)); 
    /* background-color: black ;*/ 
    } 

/* +72 [init] 0 [out] -72 [in] -144 [reset] -216 */ 

.init { 
    top: 72vh; 
    z-index: -100; 
} 

.out { 
    top: 72vh; 
    transform: translateY(-144vh); 
} 

.in { 
    top: 72vh; 
    transform: translateY(-288vh); 
} 

.reset { 
    top: -216 vh; 
    z-index: -100;  
} 
</style> 

Answer 1

あなたがこれを達成することができます多くの方法がありますについて。

具体的なコードは詳しくは載っていませんが、参考になる小さな例があります。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    player: 'one', 
 
    curtainVisible: false, 
 
    }, 
 
    methods: { 
 
    togglePlayer() { 
 
     this.curtainVisible = true; 
 
     setTimeout(() => { 
 
     this.curtainVisible = false; 
 
     this.player = this.player === 'one' ? 'two' : 'one'; 
 
     }, 750); 
 
    }, 
 
    }, 
 
});

#app { 
 
    width: 150px; 
 
    height: 150px; 
 
    margin: 20px auto; 
 
    border: 1px solid #888; 
 
    text-align: center; 
 
    line-height: 150px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    font-size: 20px; 
 
    font-family: sans-serif; 
 
    cursor: pointer; 
 
} 
 

 
.curtain { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
} 
 

 
.curtain.v-enter-active, 
 
.curtain.v-leave-active { 
 
    transition: transform 0.5s ease-in-out; 
 
} 
 

 
.curtain.v-enter, 
 
.curtain.v-leave-to { 
 
    transform: translateY(-100%); 
 
}

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script> 
 

 
<div id="app" @click="togglePlayer"> 
 
    Player {{ player }} 
 
    
 
    <transition> 
 
    <div class="curtain" v-show="curtainVisible"></div> 
 
    </transition> 
 
</div>