How to make the animation fade when changing the component?

Question

Vue.js

How to make the animation fade when the component is changed by routing, I considered the transition vue option, but something doesn’t work out, the animation should be like this if the css is: initially the component opacity: 0; transition: 1s;, after changing the component, it becomes opacity: 1;Please advise something or a ready-made animation, I will be grateful , Thank you

Answer 1

https://jsfiddle.net/h4mpy/gpwecyka/3/