[WHd      !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abc None 2346:=BHIKM!)Low level properties common to all eventsdUParent nodes always take children, but can also optionally take a list of arguments.@Example of the first case, which exercises the simpler instance: div_ $ ... children ... EExample of the second, which exercises the more complicated instance: ,span_ [class_ "example"] $ ... children ... e(The argument to a parent term is either:a list of attributes (ttrOrHandler (Signal ty)]&), which leads to a result type of ReactT ty m a -> ReactT ty m a. or children ( ReactT ty m a&), which leads to a result type of  ReactT ty m a.1-How long this animation lasts in milliseconds2(Where does this animation start and end?3Pointer to this field within 84How is the animation eased?5 Do something when it's finished?6A 6 is a type, which conventionally has no constructors, mapping to the type of state, animation state, and signals associated with a page fragment or class.Example: Mdata Slider -- note the key has no constructors data SliderState = Open | Closed data SliderSignal = SlideOpen | SlideClosed instance ReactKey Slider where type ClassState Slider = SliderState type AnimationState Slider = Double type Signal Slider = SliderSignal -- this page fragment has access to the animation state f and can -- emit  SliderSignals. pageFragment :: React Slider () pageFragment = div_ ... -- this class stores the class state and animation state. its internals -- can emit  SliderSignal9s. sliderClass :: ReactClass Slider () sliderClass = ... 77The state needed to render a class (ignoring animation)8#The state needed to animate a class9$The type of signals a class can send:Properties that can animate.Numeric values like width and height, as well as colors.;8Use an easing function to interpolate between two values<Add two animations=Subtract two animations?-Standard easing functions. These are used to ; smoothly.See  $http://joelburget.com/react-haskell/here for visualizations.gPre Attrs Handlers [ReactNode]  !"#$%&'()*dehijk+,-.lmno/0123456789:;easing functionfromto 0..1 ratio of time elapsed<=>?@ABCDEFGHIJKLMNOPQRSTUpgqrstuvwxyz{|}~VW  !"#$%&'()*dehijk+,-.lmno/0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUpgqrstuvwxyz{|}~VW+    ! "#$%&'()*dehikj+,-.lmno/0123456789:;<=>?UTSRQPONMLKJIHGFEDCBA@prqgstuvwxyz~}|{VWNoneNone=K{      !"#$%&'()*+,-./0{      !"#$%&'()*+,-./0{      !"#$%&'()*+,-./0None123456789:;<=>?@ABCDEFGHIJKLMNO123456789:;<=>?@ABCDEFGHIJKLMNO123456789:;<=>?@ABCDEFGHIJKLMNONone PQRSTUVWXYZ[ PQRSTUVWXYZ[ PQRSTUVWXYZ[NoneT\]^_`\]^_`\]^_`None!"246XYZ[\abXYZ[\XYZ[\ab None234U](24-bit colors which can be interpolated.]^cdefg_hijklmnop ]^cdefg_hij]^cdefg_hijklmnop None`A ` is a standalone component of a user interface which contains the state necessary to render and animate itself. Classes are a tool for scoping.Use a to construct.a` smart contstructor. `qrstuvwxarender functiontransition function initial stateinitial animation state `qrstuvwxa`qrstuvwxa None3yzbcbcyzbc(C) 2014-15 Joel BurgetMIT"Joel Burget <joelburget@gmail.com> experimental non-portableNone  !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVW      !"#$%&'()*+,-./0PQRSTUVWXYZ[XYZ[\]^_`abcd]^_:;<=>`a\XYZ[cb,-.+6789VW/012345?UTSRQPONMLKJIHGFEDCBA@!"#$%&'()*  {    !"##$%&'(()*+,-./011233456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYYZZ[\] ^ ^ _ ` a b cdefghijklmnnopqrstuuvvwxyz{|}~      !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\] ^ _ ` a b c d e f g h i j k ` l m n o p q r s tureact-haskell-1.3.0.0React React.Types React.AttrsReact.Elements React.Imports React.EventsReact.Interpret React.Local React.Anim React.Class React.Render FocusEventdomEventTarget relatedTarget ChangeEvent targetValue KeyboardEventkeyboardModifierKeyscharCodekeykeyCodelocalelocationrepeatwhich MouseEventmouseModifierKeys buttonNumclientXclientYpageXpageYscreenXscreenY ModifierKeysaltKeyctrlKeymetaKeyshiftKeyEventPropertiesbubbles cancelable currentTargetdefaultPrevented eventPhase isTrusted evtTarget eventTypeReactT runReactT AnimConfigduration endpointslenseasing onCompleteReactKey ClassStateAnimationStateSignal Animatable interpolateanimAddanimSubanimZeroEasing EaseOutSine EaseInSine EaseBezierEaseInOutBounce EaseOutBounce EaseInBounceEaseInOutElasticEaseOutElastic EaseInElasticEaseInOutQuint EaseOutQuint EaseInQuintEaseInOutQuart EaseOutQuart EaseInQuartEaseInOutCubic EaseOutCubic EaseInCubic EaseInOutQuad EaseOutQuad EaseInQuadLinear RenderHandle NarrowinglocalizeAnimationStategeneralizeSignallocallyColorgetAnimationState ReactClass createClassrender cancelRender TermParent TermParentArgghc-prim GHC.TypesDoubleText termParent AttrOrHandlerHandler StaticAttr RunningAnimconfigbeganAt ReactNodeLeafParentAttrsRawEvent EventHandlerhandlerevtTypeEvtType MouseLeaveEvt MouseEnterEvtDoubleClickEvtClickEvtKeyUpEvt KeyPressEvt KeyDownEvt ChangeEvt ForeignClass ReactArrayRawAttrs ForeignNode mkStaticAttrmkEventHandler separateAttrstermLeaf$fNFDataFocusEvent$fNFDataChangeEvent$fNFDataKeyboardEvent$fNFDataMouseEvent$fNFDataModifierKeys$fNFDataEventProperties$fTermParentReactT$fTermParent(->) $fMonadReactT$fIsStringReactT$fApplicativeReactT$fFunctorReactT$fMonoidReactT $fReactKey()class_href_id_src_style_value_ placeholder_for_type_checked_ autofocus_width_height_cx_cy_d_dx_dy_x_y_r_fill_viewBox_points_ transform_text_a_abbr_address_article_aside_audio_b_bdi_bdo_big_ blockquote_body_button_canvas_caption_cite_code_ colgroup_data_ datalist_dd_del_details_dfn_div_dl_dt_em_ fieldset_ figcaption_figure_footer_form_h1_h2_h3_h4_h5_h6_head_header_html_i_iframe_ins_kbd_label_legend_li_main_map_mark_menu_ menuitem_meter_nav_ noscript_object_ol_ optgroup_option_output_p_pre_ progress_q_rp_rt_ruby_s_samp_section_select_small_span_strong_sub_summary_sup_table_tbody_td_tfoot_th_thead_time_tr_u_ul_var_video_area_base_br_col_embed_hr_img_input_keygen_link_meta_param_source_track_wbr_svg_defs_g_linearGradient_mask_pattern_radialGradient_stop_tspan_circle_ellipse_line_path_polygon_ polyline_rect_ js_render js_bezierjs_createClassjs_raf js_cancelRafjs_React_DOM_leafjs_React_DOM_parentjs_empty_objectjs_set_field_Stringjs_set_field_Doublejs_set_field_Intjs_set_field_Objjs_set_field_Truejs_set_field_Falsejs_targetValuejs_set_onClickjs_set_onDoubleClickjs_set_onChangejs_set_onKeyUpjs_set_onKeyPressjs_set_onKeyDown js_set_onBlurjs_set_onMouseEnterjs_set_onMouseLeavejs_React_getDomNodejs_ReactArray_emptyjs_ReactArray_pushjs_React_DOM_textjs_parseChangeEventjs_parseKeyboardEventjs_parseMouseEvent handlerToJs makeHandler unHandleronChange onKeyDown onKeyPressonKeyUp onMouseEnter onMouseLeave onDoubleClickonClickonEnterelement voidElementsetField interpret interpret'handlerConvert nodeConvert easeInPow easeOutPow easeInOutPowelastic easeDoublestepRunningAnimslerpintLerp $fShowColor$fAnimatableColor$fAnimatable(,,)$fAnimatable(,)$fAnimatable()$fAnimatableDouble classRenderclassTransition foreignClassstateRefanimRefrunningAnimRef transitionRefdoRenderupdateCb