Can anyone point me at an example of using riot.js with jQuery animations?
I'd like to tap into the event after riot re-renders something, and then fire jQuery $(selector).fadeIn() on the element that has changed. The problem is that, the element may not exist yet when I'm changing the data, so I can't run the jQuery fadeIn until after Riot finishes re-rendering.
The best I can come up with is setTimeout; is there an event in Riot that I can listen to directly?
Usually, Riot has two events for re-rendering:
update - this is before rendering
updated - after rendering has happened
this.on(
'update',
function () {
}
)
One another possibility, is to learn about MutationObserver.
See http://davidwalsh.name/demo/detect-node-insertion.php
The riot events only tells you that something has been updated or is about to update, but not what parts of the dom will change.
Related
I wanted to see if there is a hook in Seaside that is called before rendering, and one after rendering. It happens to me that I want to show a notification on the screen, and I would like that once the rendering is finished, this component is modified so that the next time the rendering is done, it is no longer displayed.
Thanks and regards!
Instead of 'hooks', Seaside has component decorations that you can wrap around a component to change their behaviour. If you wrap your root component, you can implement a decoration that invokes hooks before and after rendering on your entire component tree.
However, changing the state of your components while rendering will break the state backtracking behavior that Seaside offers you. The state changes should happen in the action callbacks. So, there is no 'after rendering' phase where you can change the state of your component (well, you can, but it will lead to subtle problems). Instead, use the action phase (i.e. callbacks) to change the state of your component such that the next time the rendering phase is invoked, your component is not displayed.
I'm assuming that when you say 'the next time the rendering is done', this means after the user has clicked a link or done some other action. This means you can change state while executing the action callback and arrange the state of your rendering tree such that the concerned component is no longer shown. If you do it like this, the user will see the component again when he clicks the back button in the browser.
I'm using the vue-fireworks component (https://github.com/dampion/Vue-fireworks) to display an HTML5 Canvas animation of fireworks. It starts when the component is mounted which is fine. But I can't figure out how to make it stop. I need to stop the fireworks after a button click. I'd prefer that no more fire off and any that are onscreen when the button is clicked are allowed to continue to their conclusion.
Are you able to modify the source code of the Fireworks component?
I can see that it has a data prop of auto that is set to true.
If you could change that to a straight forward prop, then by changing that value to false it would stop adding more fireworks and let the other animations finish.
<Firework :boxHeight="'100%'" :boxWidth="'100%'" :auto="false"/>
Haven't tested myself, just an assumption reading through the code. Hope it helps.
I used the elementui tooltip component, and I saw that only delayed display by 'open-delay', how to make it delay disappear
Have you tried hide-after property ? Here is an example : https://jsfiddle.net/budgw/58mdw0et/
If you want to delay when the mouse leaves the element, first use the manual property on el-tooltip. Then use mousenter and mouseleave envents (in case of an el-button) to show/hide the tooltip. You can use for example debounce method from lodash in order to delay the hide method. Here is a jsfiddle : https://jsfiddle.net/budgw/qrt3pbqm/
Hope it helps.
I would like to create a carousel that scrolls automatically until the user scrolls / touches the ScrollView itself.
The auto-scrolling itself works fine with using scrollView.scrollTo but how could I detect if the user is interacting with the ScrollView? I took a look at the onScroll event but this does not seem to distinct between a user generated event and an event that was generated by calling scrollTo.
Also I'd like to know if it is possible to get the current scroll position from the ScrollView directly instead of reading it everytime from the onScroll event.
I'm very thankful for any tips and suggestions.
By digging into ScrollView's source code you can notice a few undocumented callbacks that will help you achieve what you're after, namely onTouchStart and onTouchEnd. These two callbacks are triggered only when user interacts with the ScrollView and not when you scroll programmatically.
You will probably want to clear your auto-scroll interval on onTouchStart and restart it after a delay on onTouchEnd.
Regarding your next question, the answer is no. As far as I know, no getter is currently exposed to retrieve the current scroll position. Therefore, you need to rely on the event passed to onScroll, retrieve event.nativeEvent.contentOffset['x' or 'y'], and store it in your component's state.
Note that if you're doing some heavy animations that need to follow scroll position closely (e.g. animated header or parallax image), it would be a good idea to use the native driver for Animated.event. You can learn more about it on React Native's blog.
I am doing an animation in which i use a video(I am using react-native-video). There is a bunch of animations going on and in certain point i would like to play video. So far, I did set up setTimout method in render() like this: "setTimeout(() => {this.setState({paused: false})}, 5000)" and it works in the beginning but when i quit the animation to parent view then I keep receiving warnings about updating unmounted component. Is there another way of starting a video in a given time?
Cheers,
misi06
It's a bad practice to add setState in the render method. Add it in the componentWillMount or componentWillReceiveProps based on situation.