• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • <transition>

    • Props:

      • name-string用于自动生成 CSS 过渡类名。例如:name:'fade'将自动拓展为.fade-enter.fade-enter-active等。
      • appear-boolean,是否在初始渲染时使用过渡。默认为false
      • persisted-boolean。如果是 true,表示这是一个不真实插入/删除元素的转换,而是切换显示/隐藏状态。过渡钩子被注入,但渲染器将跳过。相反,自定义指令可以通过调用注入的钩子(例如v-show)来控制转换。
      • css-boolean。是否使用 CSS 过渡类。默认为true。如果设置为false,将只通过组件事件触发注册的 JavaScript 钩子。
      • type-string。指定过渡事件类型,侦听过渡何时结束。有效值为"transition""animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
      • mode-string控制离开/进入过渡的时间序列。有效的模式有"out-in""in-out";默认同时进行。
      • duration-number |{ enter : number, leave : number}。指定过渡的持续时间。默认情况下,Vue 会等待过渡所在根元素的第一个transitionendanimationend事件。
      • enter-from-class-string
      • leave-from-class-string
      • appear-class-string
      • enter-to-class-string
      • leave-to-class-string
      • appear-to-class-string
      • enter-active-class-string
      • leave-active-class-string
      • appear-active-class-string
    • 事件:

      • before-enter
      • before-leave
      • enter
      • leave
      • appear
      • after-enter
      • after-leave
      • after-appear
      • enter-cancelled
      • leave-cancelled(仅v-show)
      • appear-cancelled
    • 用法:<transition>元素作为单个元素/组件的过渡效果。<transition>只会把过渡效果应用到其包裹的内容上,而不会额外渲染 DOM 元素,也不会出现在可被检查的组件层级中。
    <!-- 单个元素 -->
    <transition>
    	<div v-if="ok">toggled content</div>
    </transition>
    
    <!-- 动态组件 -->
    <transition name="fade" mode="out-in" appear>
    	<component :is="view"></component>
    </transition>
    
    <!-- 事件钩子 -->
    <div id="transition-demo">
    <transition @after-enter="transitionComplete">
    	<div v-show="ok">toggled content</div>
    </transition>
    </div>
    

    const app = Vue.createApp({
    	...
    	methods: {
    		transitionComplete (el) {
    		// 因为传递了'el'的DOM元素作为参数
    		}
    	}
    	...
    })
    
    app.mount('#transition-demo')
    

    上篇:<component>

    下篇:<transition-group>