![]() ![]() The setup of the intersection observer might look a bit unfamiliar, but it's pretty simple once you understand what's going on.įirst, we create a new instance of the IntersectionObserver class. Create the intersection observer and starting to observe with useEffect.Create a reference to a DOM node with useRef.Create a state variable indicating whether the section is visible or not with useState.You can read more about each of these hooks in the documentation, but in our code we're doing the following: If you want to understand what's happening, I've written a step-by-step guide below, that explains what happens.įirst, we call three built in React Hooks - useState, useRef and useEffect. If you're looking for a copy and paste solution - here you go. Here's the code for implementing our component: And since we're using React, we can write a nice reusable component that we can re-use across our application. We're not digging too deep into the other cool stuff you can do with intersection observers in this article though, we're just implementing a nice "fade in on entry"-feature. It gives us some positional data, as well as nice-to-have properties like isIntersecting, which tell us whether something is visible or not. Quickly summarized, however, an intersection observer accepts a DOM node, and calls a callback function whenever it enters (or exits) the viewport. If you want to dig deep, I suggest you read this MDN article on the subject. The IntersectionObserver API is a really powerful tool for tracking whether something is on-screen, either in part or in full. Wouldn't it be nice if an event was triggered when your content was visible? We're going to use the IntersectionObserver DOM API to implement that behavior. Looks cool right? Now, how cool would it be if we had this effect whenever we scroll a new content block into the viewport? We're also transitioning the visibility property from hidden to visible. We also specify an initial opacity of 0.īy transitioning these two properties, we'll get the effect we're after. Here, we use the transform property to initially move our container down 1/5th of the viewport (or 20 viewport height units). Enter fullscreen mode Exit fullscreen mode The transition classes will look like this. Let’s have spin up a quick example of a fade transition using our initial component. So your component would be structured like this: v in front of the classes with the name of the transition you want it to affect. In a real-life application, you’d replace the. v-leave-active - This is the class that holds the style for the transitions that remove the element from the DOM. v-enter, this is attached for the one frame at the removal of the DOM ![]() v-enter-active - This is where the process of attaching to the DOM occurs after the first frame v-enter - This CSS class is only attached for one frame at the beginning of the transition while attaching to the DOM Transition classes are default classes that ship with Vue to determine when and how to attach or remove an element from the DOM. ![]() The transition tag only allows one element (or group of elements under one div wrapper) to display at any given time.Īfter inputting the name, this is where the transition classes come in. Just wrap the element with a tag and it’ll work the same. This toggling doesn’t have to be due to v-if/ v-else it could be a dynamic component or anything else. Next, give it a unique name to be used when creating the transition classes. To create a transition on this element as it’s been toggled, the first step is to wrap the element in a tag. Then we can add the data attributes to bind to the HTML form. We have our component and we’re using conditionals ( v-if/ v-else) to toggle the element from the webpage. Transitions in Vue.js are particularly in cases where you need to attach or remove an element from the DOM, whether it’s due to routing, conditional statements, or whatever affects the element’s attachment to the DOM.Ĭonsider the case below. On the other side of the coin, animations could be disturbing if excessive or too fast. The effect is pretty minimal, but it provides more visual stimulation than the first, static page. Which of these pages is more visually appealing? I’m sure most people would go with the second option. To put what I’m saying into context, take a look at these login pages below (source: japa). Even subtle effects and movements can lend your page a sense of action, especially if they play as the website is loaded. Understanding transitions and animations in VueĪdding transitions and animations to your web applications can help capture your users’ attention and jazz up the user experience. David Atanda Follow Building scalable applications on the web. ![]()
0 Comments
Leave a Reply. |