You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

93 lines
2.6 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view
v-if="inited"
class="u-transition"
ref="u-transition"
@tap="clickHandler"
:class="classes"
:style="[mergeStyle]"
@touchmove="noop"
>
<slot />
</view>
</template>
<script>
import props from './props.js';
// 组件的methods方法由于内容较长写在外部文件中通过mixin引入
import transition from "./transition.js";
/**
* transition 动画组件
* @description
* @tutorial
* @property {String} show 是否展示组件 (默认 false
* @property {String} mode 使用的动画模式 (默认 'fade'
* @property {String | Number} duration 动画的执行时间单位ms (默认 '300'
* @property {String} timingFunction 使用的动画过渡函数 (默认 'ease-out'
* @property {Object} customStyle 自定义样式
* @event {Function} before-enter 进入前触发
* @event {Function} enter 进入中触发
* @event {Function} after-enter 进入后触发
* @event {Function} before-leave 离开前触发
* @event {Function} leave 离开中触发
* @event {Function} after-leave 离开后触发
* @example
*/
export default {
name: 'u-transition',
data() {
return {
inited: false, // 是否显示/隐藏组件
viewStyle: {}, // 组件内部的样式
status: '', // 记录组件动画的状态
transitionEnded: false, // 组件是否结束的标记
display: false, // 组件是否展示
classes: '', // 应用的类名
}
},
computed: {
mergeStyle() {
const { viewStyle, customStyle } = this
return {
// #ifndef APP-NVUE
transitionDuration: `${this.duration}ms`,
// display: `${this.display ? '' : 'none'}`,
transitionTimingFunction: this.timingFunction,
// #endif
// 避免自定义样式影响到动画属性所以写在viewStyle前面
...uni.$u.addStyle(customStyle),
...viewStyle
}
}
},
// 将mixin挂在到组件中uni.$u.mixin实际上为一个vue格式对象
mixins: [uni.$u.mpMixin, uni.$u.mixin, transition, props],
watch: {
show: {
handler(newVal) {
// vue和nvue分别执行不同的方法
// #ifdef APP-NVUE
newVal ? this.nvueEnter() : this.nvueLeave()
// #endif
// #ifndef APP-NVUE
newVal ? this.vueEnter() : this.vueLeave()
// #endif
},
// 表示同时监听初始化时的props的show的意思
immediate: true
}
}
}
</script>
<style lang="scss" scoped>
@import '../../libs/css/components.scss';
/* #ifndef APP-NVUE */
// vue版本动画相关的样式抽离在外部文件
@import './vue.ani-style.scss';
/* #endif */
.u-transition {}
</style>