Preact Transition
过渡容器 Transition
组件支持 animation
、transition
和 javascript
三类过渡动画,所有的过渡类名都将作用在此容器上。
安装
NPM
# 最新版本
npm install preact-transition
YARN
# 最新版本
yarn add preact-transition
<script>
引入
直接用
CDN
推荐链接到一个你可以手动更新的指定版本号:
<script src="https://cdn.jsdelivr.net/npm/preact-transition@0.1.5/dist/transition.js"></script>
你可以在 cdn.jsdelivr.net/npm/preact-transition 浏览 NPM 包的源代码。
也可以在 unpkg 上获取。
在你发布的站点中使用生产环境版本,把 transition.js 换成 transition.min.js。这是一个更小的构建,可以带来比开发环境下更快的速度体验。
DEMO
Props
-
component
- string,组件的根节点标签名称,默认为"div"
。 -
tag
- string,已取消属性,请使用属性 component。 -
name
- string,用于自动生成 CSS 过渡类名,默认类名为"t"
。例如:name: 'fade' 将自动拓展为下列类名:.fade-enter
- 进入前被添加到组件根节点上.fade-enter-active
- 进入过程被添加到组件根节点上.fade-enter-to
- 进入后被添加到组件根节点上.fade-leave
- 离开前被添加到组件根节点上.fade-leave-active
- 离开时被添加到组件根节点上.fade-leave-to
- 离开后被添加到组件根节点上
-
appear
- boolean,是否在初始渲染时使用过渡。默认为false
。 -
css
- boolean,是否使用 CSS 过渡类。默认为true
。如果设置为false
,将只通过组件事件触发注册的 JavaScript 钩子。 -
type
- string,指定过渡事件类型,侦听过渡何时结束。有效值为"transition"
和"animation"
。默认将自动检测出持续时间长的为过渡事件类型。 -
mode
- string,控制离开/进入的过渡方式。有效值"out"
和"in"
;默认为"in"
。
事件
所有事件的第一个参数 el
是组件容器根节点;
在不使用 CSS 过渡时, enter
和 leave
事件接收的第二个参数 done
,可以用于结束动画,done 函数可以接收一个数值参数,用于延迟过渡到多少毫秒后结束;
在组件初始渲染时,如果不使用过渡,则 afterEnter
和 afterLeave
事件会接收到第二个参数 disappear
,表示未使用过渡,直接到达了目标状态。
- onBeforeEnter(el:
Element
) - 进入前被执行 - onEnter(el:
Element
, done:Function
) - 进入时被执行 - onAfterEnter(el:
Element
, disappear?:Boolean
) - 进入结束被执行 - onBeforeLeave(el:
Element
) - 离开前被执行 - onLeave(el:
Element
, done:Function
) - 离开时被执行 - onAfterLeave(el:
Element
, disappear?:Boolean
) - 离开结束被执行
用法
import {h, render} from 'preact';
import Transition from 'preact-transition';
class Switch extends Component {
constructor(props) {
super(props);
this.state.mode = 'out';
this.change = this.change.bind(this);
}
change() {
this.setState({
mode: state.mode === 'in' ? 'out' : 'in'
})
}
render(props, state) {
return (
<Transition className="switch" name="switch" mode={state.mode} onClick={this.change}>
<div className="track">
<span>on</span>
<span>off</span>
</div>
<div className="thumb"/>
</Transition>
);
}
}
render(
Switch,
document.body
);
// 事件钩子
class Dialog extends Component {
constructor(props) {
super(props);
}
onBeforeEnter(el) {}
onEnter(el, done) {}
onAfterEnter(el, disappear) {}
onBeforeLeave(el) {}
onLeave(el, done) {}
onAfterLeave(el, disappear) {}
render({display, children}) {
const mode = display === 'show' ? 'in' : 'out';
return (
<Transition mode={mode} name="dialog" css={false}>
{children}
</Transition>
);
}
}
render(
<Dialog>
<p>The dialog content is here.</p>
</Dialog>,
document.body
);
License
MIT © 2018, Yingqin Zhang