CSS background image transition

HTML

<div id="vue">
<div class="cat" :style="`background:url(${toggle ? img1 : img2})`" @click="toggle = !toggle">
</div>
</div>

CSS

.cat{
  width:500px;
  height:500px;
  transition: 1s;
}

JavaScript

new Vue({
	el:'#vue',
	data(){
  	return {
    	toggle:false,
    	img1:'http://www.readersdigest.ca/wp-content/uploads/2011/01/4-ways-cheer-up-depressed-cat.jpg',
      img2:'https://www.petfinder.com/wp-content/uploads/2012/11/91615172-find-a-lump-on-cats-skin-632x475.jpg'
    }
  }
})