Vue笔记_03组件_transition组件(Vue内置组件)

transition组件

作用

transition组件的作用是 给 单个 元素/组件 添加过渡效果；
transition-group组件的作用是给 多个 元素/组件 添加过渡效果；

过渡时机

• vue只有在插入、更新、销毁DOM元素时，才会触发过渡效果
• 所以只有 标签/组件 在被插入、更新、销毁的时候，封装成transition组件才会出现过渡效果。

语法1

• 简单元素

  <transition>
    <div v-if="isShow">toggled content</div>
  </transition>
  

• 动态组件

  <transition>
    <component :is="view"></component>
  </transition>
  

  • is属性的值为要渲染的组件的组件名；
  • component标签在渲染时会渲染为通过is属性传入的组件，上面代码本质是

    <transition>
      <view> </view>
    </transition>
    

  • 因此若是要给组件传值，仍然可以使用 属性名=属性值 的形式进行传递

      <transition>
        <component is='组件名' 属