Vue: Day_3

Vue基础

Chapter 3


  • Transition是一个Vue自带的动画过渡组件,属性有namedurationmodekeyappear

    • 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(() => {})在组件被卸载和进入缓存后执行
  • TeleportReactDOM.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属性,确保它同一时期的组件渲染/挂载后再进行插入

posted @   这样那样如此如此  阅读(9)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示