css opacity 的妙用｜ 8月更文挑战

最近项目中遇到这样一个需求：实现鼠标移入，显示操作图标

这是一个树形控件，用过vue的小伙伴们第一想到的可能就是v-show/v-if，监听鼠标事件从而控制元素的显示与隐藏。 其实没必要买那么繁琐，一个css属性搞定，那就是opacity，直接看完整代码：

 .hideIcon {
        display: inline-block;
        float: right;
        margin-right: 8px;
        transition: 0.5s;
        -webkit-transition: .5s;
        -moz-transition: .5s;
        opacity: 0;
       
    }
    .treeNode:hover .hideIcon{
        opacity: 1;
        
    }

分解：首先，要注意一点，即显示与隐藏的内容盒子必须存在父级盒模型，不然鼠标往哪移才有效果呢， 其次，最初的透明度设为0，当鼠标移入父级时，透明度为1，最后避免过程太过生硬，给一个过渡效果，时间自定义。这样简单的几行就可以实现需求啦。 opcity还可以配合实现很多动画效果，有机会后期补充。