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安装之后才可以使用