写了个tooltip的切换动画,个人感觉比一些组件库的渐变动画好看

        最近修改了个语言切换框的tooltip的切换动画,感觉比element-plus或者其他组件库的tooltip的切换动画好看一些,看起来比较灵动,下面将代码分享出来。





    
    
    
    Document
    



    
    
    
Language
  • English
  • 中文

         代码就是上面这些,唯一需要注意的地方就是,初始情况下,.languageList的opacity为0,但是如果单单这样的话,你鼠标放上去还是能触发绑定在li上面的事件,最关键的一行代码就是:pointer-events:none;

        这样的话,鼠标事件就不会触发。而且用opacity来做动画的好处是,只使用transition就已经可以看到过渡效果了,而且用了绝对定位也不会占用其他元素的空间。同样好用的还有visibility:hiddenvisibility:visible这两个属性,也能出现过渡动效,但是往往让人最容易能想到的display:nonedisplay:block就不能很好出现过过渡动效。 

        这里贴上github的链接,虽然东西很简单,但还是欢迎朋友们给我一个star: 我的Git链接icon-default.png?t=M85Bhttps://github.com/KBKUN024/-tooltip-/tree/main

        以后要是做出一些比较有意思的东西也会放到git上,敬请关注。。。

你可能感兴趣的:(笔记,css,css3,html)