如何为Quasar的QIntersection指定自定义过渡动画？

当然可以用自定义CSS过渡类，不用局限于Quasar内置的过渡效果。QIntersection的transition属性本质是封装了Vue的<transition>组件，只要遵循Vue过渡类的命名规范，就能轻松实现自定义动画。

步骤如下：

1. 编写自定义过渡CSS类
   按照Vue过渡类的命名规则，为你的动画定义核心类（以自定义名称custom-fade-up为例）：

   /* 过渡过程中的活跃状态 */
   .custom-fade-up-enter-active, .custom-fade-up-leave-active {
     transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   }
   /* 进入前的初始状态 & 离开后的结束状态 */
   .custom-fade-up-enter-from, .custom-fade-up-leave-to {
     opacity: 0;
     transform: translateY(30px);
   }
   

2. 在QIntersection中引用自定义类
   直接把自定义过渡名称传给transition属性即可，transition-duration可以留空（以CSS中定义的时长为准），也可以用来覆盖：

   <q-intersection transition="custom-fade-up">
     <div class="p-8 bg-blue-100 rounded">
       滚动到这里我会以自定义动画出现
     </div>
   </q-intersection>
   

这样就不用再手动管理v-intersection的状态了，QIntersection会自动在元素进入/离开视口时触发你定义的过渡效果。

内容的提问来源于stack exchange，提问作者Fadhili Njagi