tailwind css + vuejs3实现过渡（transition）效果

tailwind css + vue3 = easy and beautiful transitions

不得不说，tailwind css 和vuejs可真是绝配，在transition效果的实现上也是如此。本文将简洁地分享使用tailwindcss 和 vuejs 3实现过渡的干货。

以下的知识讲帮助读者更轻松地掌握文中的内容：

• vue.js3 与 tailwind css 的搭建与整合（使用vite）。
• vuejs 与 tailwind css的使用和基础知识。
• css基础，尤其关于transition及transform的相关知识。

代码

话不多说，直接上代码：

  
    
  
  

    
      

        华中科技大学
      
    

    
      

        某位同学
      
    
    
    
      

        2021.3 - 2021.5
      
    
  

实现的思路如下：

• 动态标志位由vue3的transition标签声明，每个transition tag中包含一个需要实现过渡效果的根标签。在transition标签中，vue为我们提供了：
  • appear：是否在一开始加载对象的时候就采用过渡，不加appear则表示初始无过渡。
  • enter-active-class: transition属性的定义，如持续时间、延迟、过渡形式等。
  • enter-from-class: 声明转换开始的状态。
  • enter-to-class: 声明转换结束时的状态。
  • leave同enter，也有三个标志位，将之前的三个特殊class中的enter换成leave即可，对应的是对象离开时的过渡。在这里我没有声明，所以对象消失时没有过渡。
• 静态效果的定义，包括过渡过程的属性和开始/结束的对象状态，都由tailwind css确定，即transition标签中的所有的 xxx-xxx-class的值都是用tailwind css定义的，节省了不必要的代码跳转，提高了开发效率，同时调试起来也很方便。注意在tailwind css中，结合transition和transform是多么地简单！！！

具体的属性就不多说了，值得一提的是为什么需要vue3 + tailwind css结合起来实现：transition的实现需要状态的转换，但是当我们的vue组件（component）载入网页时，tailwind css是没有办法探测到vue组件的离开和载入的，这个功能我们需要vuejs的transition标签来实现组件的过渡；而当声明transition的各种状态和属性时，我们又使用tailwind css来定义各种css属性，从而结合两者的优势，提升开发效率。

实现效果

• 图片ease in
• 文字从下向上移动，同时逐渐放大字体，不同文字段依次延时

（请忽略乱入的鼠标~）

希望有所帮助！