javascript - Animating a custom carousel with React.js -

-

I made a carousel with React.js, until I came into the animation problem it was simple. The carousel is classic, it is composed of "slides" of the current slide and small bullet content of small thumbnails to navigate between the slides.

The carousel component is data-driven, which means that it has passed its content as a JavaScript array of objects, each slide has a li tag to be ul < / Code>, and just move margin-left to ul from one slide to another.

I am thinking that I should use ReactTransitionGroup or ReactCSSTransitionGroup to animate the transition from one code to another. The transition is basically a sliding effect that goes from left to right when moving from one slide to another.

I understand that ReactTransitionGroup s API is useful during adding or deleting some content. Here I will not want to add / remove any slides, with the animation I will change the visible.

My difficulty is to wrap my head around this, that I developed a static (aka akiman aka) carousel where the slide component currently displayed is the only state saved in the slide. The array has an index of slides. So when I click on a thumbnail to navigate to the slide number n , the only thing I am updating this internal state is, then rendering to left style It takes care of setting the property based on this index.

I do not think how can I add an animation to this carousel. Any help / hints greatly appreciated.

The answer was quite simple, no need to use ReactTransitionGroup Or feedback CSSTransitionGroup . I just used inline CSS with CSS 3 transition

In the Render function, we dynamically calculate the left property because since our slides have all the same width, the slides are displayed inline and on the parent element Only one slide appears for overflow: hidden , our dynamic class code looks like this: 

  var styles = {status: "full", top: 0, left: IMG_WIDTH * (this.props.idx - this.props.activeIdx), Zindex: 100, Infection: 'left 1s', f Dhai: '100%'};

Do not see the formula too much, it's an implementation description.

Next, note that our carousel is "infinite," which means that the transition is always the same path - left to right - even when on the first or last element The issue of playing with the index of the array of materials was "just". Side note (even troll): The hard part was even better because it had pure algorithms with data, because it was better to manipulate the difficult and diplomatic direct dom. No more for this stuff, and even for the rest of our website.


Comments

Post a Comment

Popular posts from this blog

import - Python ImportError: No module named wmi -

-
I followed the instructions for downloading WMI for Python When I try to run the code for C.Win32_Service (StartMode = "Auto", state = "Stopped") import wmi c = wmi.WMI (): if Raw_input ("restart% s?"% S.Caption) .upper () == "Y": s.StartService () I got the error < Code> traceback (most recent call end): file ". \", Line 1, edit: I am using Python 2.7.6 EDIT2: I am running 64-bit Windows 2008 R2, and I've downloaded WMI-1.4.9.zip (md5). I removed the content and put it in D: Python \ Tools \ Scripts I executed dragon setup.py.install I said D : \ Python \ tools \ scripts to% PATH% and when I execute the code for C.Win32_Service (StartMode = "Auto", state = "Stopped") import wmi c = Wmi.WMI (): If raw_input ("Restart% s?"% S. Caption). () == "Y": s.StartService () error me Gets traceback (most recent call final): File ". See \", line 1, &
Read more

Editing Python Class in Shell and SQLAlchemy -

-
I am working on the terminal on a shell script after this tutorial SQLAlchemy tutorial. I need to type gt; & Gt; & Gt; Sqlalchemy import column, integer, string & gt; & Gt; & Gt; Class user (base): __tablename__ = 'users' id = column (integer, primary_key = true) name = column (string) absolute name = column (string) password = column (string) def __repr __ (self): return "& lt ; User (name = '% s', absolute name = '% s', password = '% s') & gt; "% (Self.name, self.fullname, self.password) After the problem I have typed the password = column (string) I hit twice and changed .... >> I then took everything back but then an error was thrown because the class already exists ... I am not completely sure how to fix it. How do I open that slip in the shell script and edit it (Add DF to DRR) The error thrown below: / user / giripeters / TFSQLLX / Lib / python2.7 / site-packages / sqlalchemy / ext / decla
Read more

c# - MySQL Parameterized Select Query joining tables issue -

-
I am using parameterized select questions in conjunction with my program and it works entirely, When I try to join the table Everything I have done is a small fraction: using (MySqlCommand cmd = new MySqlCommand (paramQuery) ToSql (), Connection)) /etc/ paramQuery.ToSql () Equal: "Select TableOne ID, Tableon, Department, Tablet. One by name table, Table 2 h Yes TableOnEID = @Pharmak "* / for (Int Index = 0; Index and Lt; ParamariX Parameter (.c calculation; Index ++) Cmd.Parameters.AddWithValue (paramQuery.Parameters (). ElementAt (index). , ParamQuery.Parameters (). ElementAt (index) .Value); / * ParamQuery.Parameters (). ElementAt (index) .k = "@most 0" paramQuery.Parameters (). ElementAt (index) .Value = "tableTwo.ID" * / MySqlDataReader Reader = cmd.ExecuteReader (); While (reader.Read ()) {// do stuff} } One of the tables I attempt to join is For the table, two with the same id for all. Is there something that I'm doing wrong?
Read more