首页 > 编程笔记 > JavaScript笔记 阅读：91

Vue appear属性的用法

通义灵码
Vue 可以通过 appear 属性设置节点在初始渲染的过渡效果： 
  1. <transition appear>
  2.     <!-- ... -->
  3. </transition>
这里默认和进入/离开过渡效果一样，同样也可以自定义 CSS 类名。 
  1. <transition
  2.     appear
  3.     appear-class="custom-appear-class"
  4.     appear-to-class="custom-appear-to-class"
  5.     appear-active-class="custom-appear-active-class"
  6. >
  7. <!-- ... -->
  8. </transition>

【实例】appear属性。 
  1. <style>
  2.     .custom-appear{
  3.         font-size: 50px;
  4.         color: #c65ee2;
  5.         background: #3d9de2;
  6.     }
  7.     .custom-appear-to{
  8.         color: #e26346;
  9.         background: #488913;
  10.     }
  11.     .custom-appear-active{
  12.         color: red;
  13.         background: #CEFFCE;
  14.         transition: all 3s ease;
  15.     }
  16. </style>
  17. <div id="app">
  18.     <transition
  19.             appear
  20.             appear-class="custom-appear"
  21.             appear-to-class="custom-appear-to"
  22.             appear-active-class="custom-appear-active"
  23.     >
  24.         <p>野火烧冈草，断烟生石松。</p>
  25.     </transition>
  26. </div>
  27. <!--引入Vue文件-->
  28. <script src="https://unpkg.com/vue@next"></script>
  29. <script>
  30.     //创建一个应用程序实例
  31.     const vm= Vue.createApp({  }).mount('#app');
  32. </script>
在 Chrome 浏览器中运行程序，页面一加载就会执行初始渲染的过渡样式，效果如下图所示。


图 1 初始渲染的过渡效果

最后恢复原来的效果，如下图所示。


图 2 显示内容

还可以自定义 JavaScript 钩子函数： 
  1. <transition
  2.     appear
  3.     v-on:before-appear="customBeforeAppearHook"
  4.     v-on:appear="customAppearHook"
  5.     v-on:after-appear="customAfterAppearHook"
  6.     v-on:appear-cancelled="customAppearCancelledHook"
  7. >
  8.     <!-- ... -->
  9. </transition>
在上面的例子中，无论是 appear 属性还是 v-on:appear 钩子，都会生成初始渲染过渡。

相关文章