I’ve been studying the use of jQuery to do fancy, flashy transitions and animations. Not too fancy. Just tiny bits of eye-candy. I decided I needed to know how to actually apply this imperative programming in a Vue app, so I have added some highlighting to my Vue To-Do list app.
My to-do list app is here: https://widgetwonk.azurewebsites.net/Vue/ToDoList . It’s available for anyone to use forever, free.
For the “flash”, I just made it so when you add a new element to the list it is briefly highlighted in yellow and this fades back to transparent in 2 seconds. This was something I wrote from scratch even though I’m sure there are ready-made solutions. Knowing the techniques means I can do more sophisticated transitions later if I choose.
I wanted to do this in Vue but I did not want to clutter of component methods with view logic. If at all possible, don’t do dom manipulations in a Vue component. The appropriate place is a Vue directive. I don’t even say that for the sake of it working better. It’s more just an aesthetic rule. It’s about separation of concerns. I wrote something like this.
Vue.directive('init-highlight', {
inserted : (el, binding) => {
// imperative, fancy operations on the dom
// for animations or transitions
},
});Having written this directive, I can apply it to any element by adding a “v-init-highlight” attribute to the element.
I also added tooltips—well, just one tooltip. And I wrote a custom directive to alter the behavior of the tooltip slightly.
I plan to do more of this. I think just the right amount of subtle movement and transitions on the page can make a nice user experience. If you go too far in that direction, you get those websites from the early 2000s that had a 2-minute Flash video introduction before actually showing you some content. We won’t go that far. We will be subtle. We will aim to delight the user, not annoy him with lots of pointless spinning things.
Now, looking back on things I see how I could use this setup to apply fancy jQuery stuff to an element with a directive like the one above, but for something as simple as applying some initial highlighting whenever the element is first created, it seems silly to use anything else but native CSS3 (unless you really need to support Internet Explorer 9). I add the following CSS to a global file and then paint my elements with the class.
@keyframes initHighlight {
0% {background-color:#ffdd6d;}
100% {background-color : auto;}
}
.animate-init-highlight {
animation-name: initHighlight;
animation-duration: 3s;
animation-iteration-count: 1;
}The result is exactly what I wanted, and now I know that the animation is being done natively by the browser itself. That said, I don’t actually know about the breadth of browser support for this relatively new CSS3 technology. The whole raison d’etre of jQuery from the beginning was cross-browser compatibility. So the jQuery code I wrote before is almost definitely more robust. Those are considerations a large company might need to weigh if they know that 1% of their users are still using IE10.
adamcross.blog 