Frankly speaking, it is even difficult to formulate the question, since did not work with it before. Several times I've seen React libraries that extend the jsx properties of an element using it as an object field (at least it looks like this). I recently came across another library with a similar implementation - framer motion. The point is that if I want to add animation to my element, I must add a motion object to my jsx element, as a result, its will be looks like this - <motion.span> text </motion.span>
Actually the question. Could you explain to me how it works? Is this a simmilar to higher-order component?
Related
I have just started working on react-spring. From the very beginning, I have seen the usage of '''<animated>''' tag. As, I explored more and complexity increases, I find more and more details of the code which I do not fully understand.
For example, Just have a look at this sandbox-
https://codesandbox.io/s/stupefied-noether-8i6o0
I am still not clear how the key variable passed to animated tag is working under the hood. Moreover, is there is an exhaustive list on which parameters can I pass to animated tag?
Also, is there any good tutorials/resources to understand react-spring in detail? The official document though is quite helpful, doesn't provide enough resolution on micro details of each aspect of it's function.
The key prop is not directly related to react-spring, in your example you can see that string which is an array uses the map() function to map and render animated divs.
key is used by React in order to be able to track those elements between changes and be able to determine whether the virtual DOM needs to generate those elements again as a whole or only the new ones that are added. More about keys and lists can be found here.
For more info about react-spring you might find some more information here, if you have something specific you would like to achieve feel free to make a question about it, playing with the library and experiencing it yourself will probably be the best way to learn about it.
How does D3 dom-manipulation mechanism influence (if any at all) on React's virtual-dom?
I've found many examples show that both libraries can work together great, but none of them refer to this issue..
It might not be an issue at all btw, it's just a big question that I raised, but couldn't find an answer for.
EDIT:
I've just learned that only when "writing" to the virtual-dom, the dom get's updated. and ALWAYS when "reading" from the actual "reading" is done on the virtual-dom.
So when I use D3 to update the DOM directly, the virtual-dom has no idea about it, and I won't be able to read the new changes from the virtual-dom.
That's what I was afraid of, and now I wonder how React's helping me when I have to use D3?
You follow the rules of each when interacting with them. With regard to react, you wrap the d3 dom manipulation in a component, and that's it.
Depending on the components you use, you can either have components that do everything in d3, or write some primitives which allow you to use react components instead of low level d3.
From looking at the code, it seems that three does not give much control over the depthFunc. I would like to confirm that it's only set once as the default GL state, and not available say, in the material?
I'm not familiar with all examples, and was wondering if this is happening somewhere?
If not, what would be the best approach to set the depthFunc to gl.EQUAL for example, when a specific draw call is being made i.e. a mesh with a material?
Is something like toggling between scenes i.e. use one to render stuff, then use another one to render stuff on top of the first one a good solution for this? That's the only example that i've seen of tweaking the otherwise sorted objects.
It's currently in the dev branch of three.js: the pull request.
I´m working with Raphael, and I think that I´m using it in a way that does not take advantage of some features that seems to be useful.
For example, I´m trying to add a listener on a Set (a group of elements), in a way that on mouse over on any of those elements, the script triggers an animation on the whole set.
When you add a listener to a set, Raphael adds the listener to each of the elements and animates them separately.
Like you see in this example http://jsfiddle.net/4VYHe/3/ in wich I want that all the rectangles in the same set (set = horizontal groups of 10 rectangles), change the color attribute on mouse over on any of them.
I have found a few methods in the raphael documentation that i think must help to achive this. But I´m having a hard time understanding how these methods work.
For example:
the eve object(http://raphaeljs.com/reference.html#eve)
the Element.animateWith() method (http://raphaeljs.com/reference.html#Element.animateWith)
the Raphael.animation() method (http://raphaeljs.com/reference.html#Raphael.animation)
The Raphael Library seems to be really powerful and I really want to get it work properly, I don´t want to write all kinds of diferent javascript hacks, because I think that these tools have to get the work done in a more elegant way.
If you think that I´m using the wrong library I´m still open to all kinds of advices.
Thank you in advance.
---EDIT---
This is a working example (http://jsfiddle.net/4VYHe/6/). But this is a hack with lack of efficiency and elegancy. I want something that uses the correct tools on the correct way.
There is some information on this page. http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2#PAGETOP . A couple of examples, but nothing that explain how things work in Raphael.
Take a look at this fiddle, I think it is doing what you are looking for. The fundamental difference is that you want to call animate on the set, rather than this. It appears that when you add a handler to a set, this refers to the individual elements in the set (which are iterated over to assign the handler), and not the set itself.
Note that I pulled the handler functions out into the getHoverHandler function:
function getHoverHandler(fillColor) {
var cSet = set;
return function(){
cSet.animate({fill: fillColor}, 300);
};
}
set.hover(getHoverHandler('#000'),
getHoverHandler('#FFF'));
in order to break the closure. If you try to do it like this:
set.hover(function(){
set.animate({fill: '#000'}, 300)
}, function(){
set.animate({fill: '#FFF'}, 300)
});
as you loop through, set will keep changing, and the closures will maintain awareness of this. As a result, all handlers will be acting on the last row of boxes.
If you don't understand javascript closures, you might want to look at this article. It is old, but in pretty simple language, and it helped me as I have tried to get my head around them.
Kreek is absolutely correct in this comment above. Sets are a workaround for the inconsistencies between SVG and VML.
In your example above, you're running into the same issue that you were facing in your previous question. Using this in an anonymous function will almost always not work in the way you expect, as this won't be referring to what you think it is. Have a look at this discussion, particularly the first two comments in the comments section. (As an aside, the commenter uses "self" as the reference to "this", which is much better than my "that", which goes to show there's always someone doing it better than yourself)
Anyway, with that in mind, I've cloned your fiddle, wrapped your set in an object, and put the events into the object constructor. By doing this, the event can then refer to that.set and animate all objects in the set at the same time.
It's a small but fundamental concept that will aid you throughout any Raphael (or javascript) development you do.
This doesn't answer your question directly, but hopefully clarifies some of the issues you seem to be discovering. I can't really comment on the animation calls you've mentioned, but I do think that Raphael as a library is definitely worth persevering with.
N.
http://jsbin.com/idala
How is it implemented?
The creator used javascript prototype feature (not the popular Prototype framework) to create a Christmas Tree class named chrisTree.
There are methods implemented to perform the 'drawing' of the tree as well as the animation by:
Dynamically creating DOM elements to represent the trees
Manipulation of CSS styles
Using setTimeout method for animation effect triggering
etc. etc.
Nice work!
Javascript making use of x, y coordinates, arrays and bit of css. You got to analyze it closely to get an idea of how it works. Of course you should have good understanding of javascript. :)
Creating div elements which are absolutely positioned so that it appears as a tree.
Settimeout used to light up divs
Colors are stored in an array
You can view the code using the following link and understand what is being done
http://jsbin.com/idala/edit