React学习-复杂交互

一、css中的动画分为两部分:过度和关键帧动画

     过度:两个不同状态之间进行插值实现动画效果,他包含一个开始状态和一个结束状态。通过transition属性来控制css过渡效果,他会告诉浏览器在一段时间内,对选择器中包含的属性进行插值运算,从而实现动画效果,transition属性最多可以接受四个特性
        (1)需要进行动画处理的元素的属性名称 如color和width,如果省略该参数, 所有可实现动画效果的属性都会被进行过渡处理
        (2)动画的持续时间

        (3)可选的时间方法用于控制动画的加速曲线,如ease-in和ease-out

        (4)在动画开始之前,可选的延迟时间。

      关键帧动画:另外一种创建css动画的方法是keyframe属性,他可以让你更精确地控制动画序列的中间状态,而不是让浏览器自动的完成所有的处理。使用关键帧动画的时候,你需要在一个单独的css块中通过@keyframes规则和名称来定义你的动画步骤:
在后续的任何一个样式定义中,都可以通过animation属性来引用预先定义的关键帧。animation属性接受关键帧的名称、动画持续时间和其他的可选的配置(如重复次数)

animation 属性是一个简写属性,用于设置六个动画属性:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。

二、ReactCSSTransitionGroup:
      1.ReactCSSTransitionGroup是一个简单元素,其中包装了所有你实现动画效果需要的元素,他会在组件特定的生命周期中(如挂载和卸载时)触发CSS动画和过渡效果。他是以插件的形式提供的,因此在使用之前需要先安装插件: npm install --save react-addons-css-transition-group

      2.ReactCSSTransitionGroup元素必须包装在你需要实现动画效果的子元素外。他可以接受三个属性:transitionName(映射到CSS中包含实际动画定义的类名)、transitionEnterTimeout和transitionLeaveTimeout(定义了动画的持续时间,以毫秒为单位)

三、拖放:React-DnD:在底层,React DnD会使用浏览器开房的API,处理各个厂商之间API的不一致性和怪异性,隐藏起具体的实现细节。注意:React DnD作为一个外部库,在使用之前需要通过npm安装之后才可以使用

阅读更多
个人分类: react学习
上一篇React学习2-使用组件构建应用程序
下一篇React学习-路由(Router)
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭