display:none和visibility:hidden v-show和v-if的区别以及div动画显隐

隐藏元素display:none 和 visibility:hidden的区别

visibility:hidden; /*可以隐藏某个元素，但是即使不可见的元素也会占据页面上的空间。*/
display:none; /*不会占据空间*/

visibility 属性规定元素是否可见。即使不可见的元素也会占据页面上的空间。
display 属性来创建不占据页面空间的不可见元素。即使不可见的元素也不会占据页面上的空间

v-if和v-show都可以动态的控制dom显示和隐藏

v-if /*是将dom元素动态的添加或删除*/
v-show /*则是为该元素添加display:none属性，dom元素还存在于页面中*/

很遗憾，如果要用到transition做过渡动画的话，这4个都行不通。
所以我用的是opacity 属性来控制。