Vue: Day_3

Vue基础

Chapter 3

---

• Transition是一个Vue自带的动画过渡组件，属性有name、duration、mode、key、appear

  • name是可以给该类定义name，不指定会是v

    • <template>
      	<Transition name="hello"><div></div></Transition>
      </template>
      
      <style scoped>
      .hello-enter-active,
          .hello-leave-active {
              transition: all .3s;
          }
      .hello-enter-from,
          .hello-leave-to {
              opacity: 0;
          }
      </style>
      

  • duration指定执行组件的延迟，可以指定duration="500"，也可以指定:duration="{enter: 200, leave: 300}"

  • mode="out-in"指定在上一个组件执行完成后，才能就行下一场过渡,TransitionGroup不支持该属性

  • appear可以通过给Transition直接添加让DOM在初次渲染时也有动画

  • key当只有DOM中的文字修改后也想进行动画，可以使用该属性

  • <TransitionGroup
       @before-enter="fn"
       @enter="fn"
       @after-enter="fn" 
       @before-end="fn"
       @end="fn"
       @after-end="fn"
    ></TransitionGroup>
    // 每个回调函数的第一个参数都是element，只有leave和enter有第二个参数done，在完成时会执行done回调函数
    

• TransitionGroup可以为所有的DOM添加过渡，在CSS中v-move以及v-leave-active: position: absolute;指定，也可以使用tag="div"把TransitionGroup声明为div

• KeepAlive

  • 指定保存值，使用:include="a, b"也可以使用数组:include="[a, b]"
  • 排除保存,:exclude="a, b"
  • 指定最多缓存多少个组件:max="2"
  • onActivated(() => {})在组件初次渲染和重新被插入后执行
  • onDeactivated(() => {})在组件被卸载和进入缓存后执行

• Teleport与ReactDOM.createPortal一样的功能，可以将该组件下的slot传递到指定的DOM下面

  • <template>
    	// 传递到类名为.mask的DOM下面
    	<Teleport to=".mask">
        	<div>
                1111
        	</div>
        </Teleport>
    	
    	<Teleport to=".mask">
        	<div>
            	2222    
        	</div>
        </Teleport>
    </template>
    
    // 会按顺序插入， 结果如下： 
    <div class="mask">
        <div>
            1111
        </div>
        <div>
            2222
        </div>
    </div>
    

  • 也可以使用defer属性，确保它同一时期的组件渲染/挂载后再进行插入