一首江南忆(vue)

播放效果

by lu wei

HTML

<div id="el">
	<p class="playdata">
		<span v-for="(idx,item) in playdata"  class="nowdata" track-by="$index" :class="{nowplay: !nplay[idx], first: idx === 0 || newline[idx] === 0}">{{{item}}} </span>
	</p>
</div>

CSS

.orldata{
    font-size: 14px;
    color: goldenrod;
}
.click{
    cursor: point;
    color: purple;
}
.playdata{
    color: yellowgreen;
    transition: all .5s ease;
}
.nowdata{
    color: goldenrod;
    transition: all .8s ease;
    opacity: 1;
}
.nowplay{
    color: yellowgreen;
    opacity: 0;
}
.first{
	padding-left: 20px;
}

JavaScript

var vm = new Vue({
	el: '#el',
	data: {
		data: '江南好，风景旧曾谙，日出江花红胜火，春来江水绿如蓝，能不忆江南？江南忆，最忆是杭州，山寺月中寻桂子，郡亭枕上看潮头，何日更重游？江南忆，其次忆吴宫，吴酒一杯春竹叶，吴娃双舞醉芙蓉，早晚复相逢？',
		playdata: [],
		nplay: [],
		newline: []
	},
	methods: {
		play: function () {
			let $this = this;
			let data = $this.data.split('');
			let len = data.length;
			$this.nplay = [];
			$this.playdata = [];
			for (let i=0; i<len; i++) {
				let line = data[i];
				if (data[i] == '?' || data[i] == '？') {
					this.newline[i+1] = 0;
					line += '<br/>'
				}
				$this.$set('playdata[' + i + ']', line);
			}
			let length = 0;
			var ivl = setInterval(function () {
				if (length < len) {
					$this.$nextTick(function () {
						$this.$set('nplay[' + length +']', true);
						length += 1;
					});
				} else {
					clearInterval(ivl);
				}
			}, 200);
		}
	},
	ready() {
		this.play();
	}
});