107 lines
2.8 KiB
Vue
107 lines
2.8 KiB
Vue
<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> |