<template>
	<ciy-header ref="header" title="ciy-aniheight组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">高度专用动画组件</view>
			<view class="content">
				<view class="tip">
					支持自适应高度变化动画。<br />
					由于微信小程序等的限制，通用方法存在跳帧、并帧等兼容性问题。<br />
				</view>

				<view class="txt-wb">原理</view>
				<view class="tip">
					不使用createAnimation和transition。<br />
					定时器动态更新height。<br />
				</view>
			</view>
		</view>
		<button class="btn" @tap="anihei=true">放出</button>
		<button class="btn" @tap="anihei=false">收回</button>
		<button class="btn" @tap="heis=Math.floor(Math.random() * 15) + 3">随机{{heis}}</button>
		<ciy-aniheight ref="anihei" :show="anihei" ciystyle="background:var(--bg1);overflow:hidden;">
			<view v-for="index in Array(heis).keys()" :key="index">
				{{index}}
			</view>
		</ciy-aniheight>
		<view class="ciy-card">
			<view class="title">属性</view>
			<view class="content">
				<view class="prp">ani</view>
				<view class="tip">动画字符串anis[String]。</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">方法</view>
			<view class="content">
				<view class="fun">async Doani</view>
				<view class="tip">
					触发一次动画<br />
					传入字符串或{anis, init}<br />
					anis: 支持字符串或Array，定义动画。<br />
					init: createAnimation函数初始化的传参。<br />
					　　默认{timingFunction: 'ease'}
				</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">anis[String]</view>
			<view class="content">
				
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">anis[Array]</view>
			<view class="content">
				包含多个{key:val}<br />
				key是Animation函数名<br />
				val是传参，多个值用[]展开。<br />
				key=step，传参用{duration:n, ...}。<br />
				key=hide，为隐藏动画元素。<br />
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">事件</view>
			<view class="content">
				无
				<!-- <view class="evt">@change</view> -->
				<view class="log" v-for="(item, index) in eventlog" :key="index">
					<text class="code">{{eventlog.length - index}}</text>
					{{item}}
				</view>
			</view>
		</view>
		<view class="hr"></view>
	</view>
</template>

<style>
	@import '@/pages/demo/zdemo.css';
	.anibox {
		width: 10em;
		height: 5em;
		background: #42ab00;
		border-radius: 0.5em;
		text-align: center;
		line-height: 5em;
		color: #ffffff;
		margin: 2em auto;
	}
</style>

<script>
	import zmixin from '@/pages/demo/zmixin.js';
	export default {
		mixins: [zmixin],
		data() {
			return {
				heis:5,
				anihei: false
			}
		},
		onLoad() {
		},
		methods: {
		}
	}
</script>