{"id":261678,"date":"2017-10-24T07:01:24","date_gmt":"2017-10-24T14:01:24","guid":{"rendered":"http:\/\/css-tricks.com\/?p=261678"},"modified":"2017-10-25T16:25:48","modified_gmt":"2017-10-25T23:25:48","slug":"creating-vue-js-transitions-animations","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/creating-vue-js-transitions-animations\/","title":{"rendered":"Creating Vue.js Transitions & Animations"},"content":{"rendered":"

My last two projects hurled<\/em> me into the JAMstack<\/a>. SPAs, headless content management, static generation… you name it. More importantly, they gave me the opportunity to learn Vue.js<\/a>. More than “Build a To-Do App” Vue.js, I got to ship real-life, production-ready Vue apps.<\/p>\n

The agency behind Snipcart (Spektrum) wanted to start using decoupled JavaScript frameworks for small to medium sites. Before using them on client projects, however, they chose to experiment on themselves. After a few of my peers had unfruitful experiences with React, I was given the green light to prototype a few apps in Vue. This prototyping morphed into full-blown Vue apps for Spektrum connected to a headless CMS. First, I spent time figuring out how to model and render our data appropriately. Then I dove head first into Vue transformations to apply a much-needed layer of polish on our two projects.<\/p>\n

<\/p>\n

I’ve prepared live demos on CodePen<\/a> and GitHub repos<\/a> to go along with this article. <\/p>\n

This post digs into Vue.js and the tools it offers with its transition system. It is assumed that you are already comfortable with<\/em> the basics of Vue.js<\/a> and CSS transitions. For the sake of brevity and clarity, we won’t get into the “logic” used in the demo.<\/p>\n

Handling Vue.js Transitions & Animations<\/h3>\n
\"\"<\/figure>\n

Animations & transitions can bring your site to life and entice users to explore. Animations and transitions are an integral part of UX and UI design. They are, however, easy to get wrong. In complex situations like dealing with lists, they can be nearly impossible to reason about when relying on native JavaScript and CSS. Whenever I ask backend developers why they dislike front end so vehemently, their response is usually somewhere along the lines of “… animations<\/em>“.<\/p>\n

Even for those of us who are drawn to the field by an urge to create intricate micro-interactions and smooth page transitions, it’s not easy work. We often need to rely on CSS for performance reasons, even while working in a mostly JavaScript environment, and that break in the environment can be difficult to manage.<\/p>\n

This is where frameworks like Vue.js step in, taking the guess-work and clumsy chains of setTimeout<\/code> functions out of transitions.<\/p>\n

The Difference Between Transitions and Animations<\/h3>\n

The terms transition<\/em> and animation<\/em> are often used interchangeably but are actually different things.<\/p>\n

\"\"<\/figure>\n