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

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在使用VueJS开发一个棋盘的概念。我正在尝试改进人体工程学。CSS一个元素的两个连续转换转换

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

  • 播放器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>

回答：

有很多，你可以做到这一点的方式。

我不打算详细说明您的具体代码，但这里有一个可能对您有帮助的小例子。

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>

以上是 CSS一个元素的两个连续转换转换 的全部内容， 来源链接： utcz.com/qa/260424.html

回到顶部