import { ComponentType } from 'react' import { StandardProps, CommonEventFunction } from './common' interface ShareElementProps extends StandardProps { /** 映射标记 * @supported weapp * @deprecated 使用mapkey替换key */ key?: string /** 映射标记 * @supported weapp * @unique */ mapkey?: string /** 映射标记 * @supported alipay */ name?: string /** 是否进行动画 * @default false * @supported weapp, alipay */ transform?: boolean /** 动画时长,单位毫秒 * @default 300 * @supported weapp, alipay */ duration?: number /** css缓动函数 * @default ease-out * @supported weapp, alipay */ easingFunction?: string /** 手势返回时是否进行动画 * @supported weapp * @default false */ transitionOnGesture?: boolean /** 指定 push 阶段的飞跃物 * @supported weapp * @default "to" */ shuttleOnPush?: 'from' | 'to' | 'from' | 'to' /** 指定 pop 阶段的飞跃物 * @supported weapp * @default "to" */ shuttleOnPop?: string /** 动画插值曲线 * @supported weapp * @default "materialRectArc" */ rectTweenType?: | 'materialRectArc' | 'materialRectCenterArc' | 'linear' | 'elasticIn' | 'elasticOut' | 'elasticInOut' | 'bounceIn' | 'bounceOut' | 'bounceInOut' | 'cubic-bezier(x1,' /** 动画帧回调 * @supported weapp */ onFrame?: string } /** 共享元素 * * 共享元素是一种动画形式,类似于 [`flutter Hero`](https://flutterchina.club/animations/hero-animations/) 动画,表现为元素像是在页面间穿越一样。该组件需与 [`PageContainer`](/docs/components/viewContainer/page-container) 组件结合使用。 * 使用时需在当前页放置 `ShareElement` 组件,同时在 `PageContainer` 容器中放置对应的 `ShareElement` 组件,对应关系通过属性值 key 映射。当设置 `PageContainer` `显示时,transform` 属性为 `true` 的共享元素会产生动画。当前页面容器退出时,会产生返回动画。 * @classification skyline * @supported weapp, alipay * @example_react * ```tsx * // index.js * import { useState, useCallback } from 'react' * import { View, Button, PageContainer, ShareElement } from '@tarojs/components' * * import './index.scss' * * const contacts = [ * { id: 1, name: 'Frank', img: 'frank.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' }, * { id: 2, name: 'Susan', img: 'susan.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' }, * { id: 3, name: 'Emma', img: 'emma.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' }, * { id: 4, name: 'Scott', img: 'scott.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' }, * { id: 5, name: 'Bob', img: 'bob.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' }, * { id: 6, name: 'Olivia', img: 'olivia.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' }, * { id: 7, name: 'Anne', img: 'anne.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' }, * { id: 8, name: 'sunny', img: 'olivia.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' } * ] * * export default function () { * const [show, setShow] = useState(false) * const [contact, setContact] = useState(contacts[0]) * const [transformIdx, setTransformIdx] = useState(0) * * const onBeforeEnter = useCallback((res) => { * console.log('onBeforeEnter: ', res) * }, []) * const onEnter = useCallback((res) => { * console.log('onEnter: ', res) * }, []) * const onAfterEnter = useCallback((res) => { * console.log('onAfterEnter: ', res) * }, []) * const onBeforeLeave = useCallback((res) => { * console.log('onBeforeLeave: ', res) * }, []) * const onLeave = useCallback((res) => { * console.log('onLeave: ', res) * }, []) * const onAfterLeave = useCallback((res) => { * console.log('onAfterLeave: ', res) * }, []) * * const showNext = (e, index) => { * setShow(true) * setContact(contacts[index]) * setTransformIdx(index) * } * * const showPrev = useCallback(() => { * setShow(false) * }, []) * * return ( * * * { * contacts.map((item, index) => ( * showNext(e, index)}> * * {item.name} * * * Phone: {item.phone} * Mobile: {item.mobile} * Email: {item.email} * * * )) * } * * * * * * {contact.name} * * * Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nisl enim, sodales non augue efficitur, sagittis * varius neque. Fusce dolor turpis, maximus eu volutpat quis, pellentesque et ligula. Ut vehicula metus in nibh * mollis ornare. Etiam aliquam lacinia malesuada. Vestibulum dignissim mollis quam a tristique. Maecenas neque * mauris, malesuada vitae magna eu, congue consectetur risus. Etiam vitae pulvinar ex. Maecenas suscipit mi ac * imperdiet pretium. Aliquam velit mauris, euismod quis elementum sed, malesuada non dui. Nunc rutrum sagittis * ligula in dapibus. Cras suscipit ut augue eget mollis. Donec auctor feugiat ipsum id viverra. Vestibulum eu nisi * risus. Vestibulum eleifend dignissim. * * * * * * * * ) * } * ``` * ```scss * \/** index.scss *\/ * page { * color: #333; * background-color: #ddd; * overflow: hidden; * } * * button { * border: 0 solid #0010ae; * background-color: #1f2afe; * color: #fff; * font-size: 120%; * padding: 8px 16px; * outline-width: 0; * -webkit-appearance: none; * box-shadow: 0 8px 17px rgba(0, 0, 0, 0.2); * } * * .screen { * position: absolute; * top: 0; * bottom: 0; * left: 0; * right: 0; * padding: 16px; * -webkit-overflow-scrolling: touch; * } * * .contact { * position: relative; * padding: 16px; * background-color: #fff; * width: 100%; * height: 100%; * box-sizing: border-box; * } * * .avatar { * position: absolute; * top: 16px; * left: 16px; * font-size: 0; * } * * .name { * height: 65px; * font-size: 2em; * font-weight: bold; * text-align: center; * margin: 10px 0; * } * * .list { * padding-top: 8px; * padding-left: 32px; * } * * .screen1 { * overflow-y: scroll; * padding: 0; * } * * .screen1 .contact { * margin: 16px; * height: auto; * width: auto; * box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2); * } * * .screen2-button { * display: block; * margin: 24px auto; * } * * .paragraph { * -webkit-transition: transform ease-in-out 300ms; * transition: transform ease-in-out 300ms; * -webkit-transform: scale(0.6); * transform: scale(0.6); * } * * .enter.paragraph { * transform: none; * } * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/component/share-element.html */ declare const ShareElement: ComponentType export { ShareElement, ShareElementProps }