1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- <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';
- import transition from "./transition.js";
- export default {
- name: 'u-transition',
- data() {
- return {
- inited: false,
- viewStyle: {},
- status: '',
- transitionEnded: false,
- display: false,
- classes: '',
- }
- },
- computed: {
- mergeStyle() {
- const { viewStyle, customStyle } = this
- return {
-
- transitionDuration: `${this.duration}ms`,
-
- transitionTimingFunction: this.timingFunction,
-
-
- ...uni.$u.addStyle(customStyle),
- ...viewStyle
- }
- }
- },
-
- mixins: [uni.$u.mpMixin, uni.$u.mixin, transition, props],
- watch: {
- show: {
- handler(newVal) {
-
-
- newVal ? this.nvueEnter() : this.nvueLeave()
-
-
- newVal ? this.vueEnter() : this.vueLeave()
-
- },
-
- immediate: true
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- @import '../../libs/css/components.scss';
- @import './vue.ani-style.scss';
- .u-transition {}
- </style>
|