transition与display冲突问题

问题：在使用dispaly:none(block)对div的显示隐藏应用于过渡属性上时，但是transition完全失效，没有过渡效果

原因：display:none的时候，页面文档流中将不会存在该元素，display:block的时候，文档流中才存在该元素，transition属性无法对一个从无到有的元素进行过渡显示

解决方法:
（1）使用visibility代替display,visibility:hidden的时候元素任然存在于文档流中，同时visibility:hidden对应的数值0，visibility:visible对应的数值1，transition属性可以对0～1之间进行过渡
（2）使用vue自带的transition标签，可以对dispaly进行操作，动画效果也更为友好