CSS一个元素的两个连续转换转换

Question

我正在使用VueJS开发一个棋盘的概念。我正在尝试改进人体工程学。

我需要一种窗帘的简要屏蔽板改变玩家的回合和点视图时：

• 播放器1只点击目的地目标方
• 窗帘开始移动从屏幕顶部的底部（CSS类+转换：转换）
• 博弈模型被更新，板显示为playzer 2来看
• 落下帷幕和玩家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）正确地产生所需的效果
• chaining计时器从状态正常传递到另一个

这里的代码，至于

<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>