Vue.js 2 Web Development Projects

Animating a value

These banners would be prettier if we could animate them when they shrink or grow. We can't rely on CSS transitions since we need to dynamically change the SVG path, so we need another way--we will animate the value of the height property used in the template.

1. First, let's rename our template computed property to targetHeight:

      computed: {        targetHeight () {          return 220 * this.ratio + 40        },      },

This targetHeight property will be calculated only once whenever the ratio changes.

2. Add a new height data property that we will be able to animate each time targetHeight changes:

      data () {        return {          height: 0,        }      },

3. Initialize the value of height with the value of targetHeight when the component has been created. Do this in the ...