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进行操作,动画效果也更为友好