Vue

by FiNGAHOLiC

HTML

<div id="app">
  <div id="screen" v-on:click="next">
    <p id="message" v-bind:class="animationClass">
      {{ scene[sceneNum].text }}
    </p>
  </div>
</div>

CSS

#app {
  background: #efefef;
}

#screen {
}

#message {
  animation-fill-mode: forwards;
  font-size: 30px;
  overflow: hidden;
  width: 0%;
  white-space: nowrap;
}

.animation {
  animation: slide-in 0.5s ease-in;
}

@keyframes slide-in {
	100% { width: 100%; }
}

Vue

new Vue({
  el: "#app",
  computed: {
  	animationClass: function(){
    	return {animation: this.ready};
    }
  },
  data: {
  	ready: false,
  	sceneNum: 0,
    scene: [
      { text: "Learn JavaScript"},
      { text: "Learn Vue"},
      { text: "Play around in JSFiddle"},
      { text: "Build something awesome"}
    ]
  },
  mounted: function(){
  	this.init();
  },
  methods: {
  	init: function(){
    	const self = this;
    	this.ready = false;

      // キャラクター表示したり各種準備
      setTimeout(function(){
      	self.ready = true;
      }, 1000);
    },
  	next: function(){
    	const sceneNum = this.sceneNum += 1;
    	this.sceneNum = sceneNum % this.scene.length;
      this.init();
    }
  }
})