显示隐藏过度效果（hover）

css
在css添加过度效果，常用的hover，然后在里面添加样式

class:hover {
   
	transition： all .5s
	color: #fff
	...
}

但是如果元素添加了display:none,visibility:hidden，那么过度样式会无效，解决办法如下

class {
   
  transition:visibility .5s, opacity .5s;
  visibility:hidden;
  opacity: 0;
}
class:hover {
   
  visibility:visible;
  opacity: 1;
}

css没有点击显示隐藏的过度效果，在vue中有解决办法，使用v-if或v-show显示或隐藏，使用transition标签实现过度效果

//注意需要加上key
<div class=