Teleport

是一种能够将我们的模板渲染至指定DOM节点不受父级style、v-show等属性影响但data、prop数据依旧能够共用的技术类似于

React

因为Teleport节点挂载在其他指定的DOM节点下完全不受父级style样式影响

teleport

#footer{data}{{data}}/template/A

/teleport

使用一个teleport标签包裹并且使用to属性去跳转到想要的dom元素处也可以使用class或者id选择器

div

#footer{data}{{data}}/template/A

/teleport

有时候我们离开这个组件后不希望组件被重新渲染那么就可以使用keep-alive

使用后会增加两个生命周期onActivated和onDeActivated

onMounted之后执行一次

{shallowRef,ref,reactive,markRaw}

from

changeView(index:number){active.value

indexcom.value

classcontainerdivv-for(item,index)

comData

index}clickchangeView(index){{item.name}}/div/divkeep-alive

:excludecomData[0].namecomponent

/templatestyle

{onMounted,onActivated,onDeactivated}

from

classcontexth1我是b组件/h1divspan请输入/spaninput

typetext

vue提供了transition来封装组件可以对一个组件提供离开或者进入的过渡对于以下四个都有作用

条件渲染

过度效果你需要对transition组件的name属性自定义。

并在css中写入对应的样式

v-enter-from定义进入过渡的开始状态。

在元素被插入之前生效在元素被插入之后的下一帧移除。

v-enter-active定义进入过渡生效时的状态。

在整个进入过渡的阶段中应用在元素被插入之前生效在过渡/动画完成之后移除。

这个类可以被用来定义进入过渡的过程时间延迟和曲线函数。

v-enter-to定义进入过渡的结束状态。

在元素被插入之后下一帧生效

(与此同时

v-leave-from定义离开过渡的开始状态。

在离开过渡被触发时立刻生效下一帧被移除。

v-leave-active定义离开过渡生效时的状态。

在整个离开过渡的阶段中应用在离开过渡被触发时立刻生效在过渡/动画完成之后移除。

这个类可以被用来定义离开过渡的过程时间延迟和曲线函数。

v-leave-to离开过渡的结束状态。

在离开过渡被触发之后下一帧生效

(与此同时

:excludecomData[0].namecomponent

/transition

enter-from-classenter-active-classenter-to-classleave-from-classleave-active-classleave-to-class

在这些props后接要自定义的名字即可换成自己想要的相当于起别名

transition

transitionenter-active-classanimate__animated

animate__fadeInLeftleave-active-classanimate__animated

:excludecomData[0].namecomponent

:iscom/component/keep-alive/transition

对于transition

//对应enter-fromenterenter//对应enter-activeafter-enterafterEnter//对应enter-toenter-cancelledenterCancelled//显示过度打断before-leavebeforeLeave//对应leave-fromleaveleave//对应enter-activeafter-leaveafterLeave//对应leave-toleave-cancelledleaveCancelled//离开过度打断

他们都会传入一个参数elElement

enter和leave会多一个参数done也就是一个回调当过渡执行完毕时会自动调用

4.appear

同时渲染整个列表我们会使用transition-group.组件

tag

指定渲染一个元素。

也就是说不使用tag那么就是分散的元素节点没有生成一个父节点包裹过渡模式不可用因为我们不再相互切换特有的元素。

内部元素总是需要提供唯一的

key

clickpoppop/button/divtransition-groupenter-active-classanimate__animated

animate__backInDownleave-active-classanimate__animated

classcontextdivclassshowListv-for(item,index)

list

:keyindex{{item}}/div/transition-group/div

/templatestyle

组件还有一个特殊之处。

除了进入和离开它还可以为定位的改变添加动画。

只需了解新增的

v-move

类就可以使用这个新功能它会应用在元素改变定位的过程中。

像之前的类名一样它的前缀可以通过

name

clickchangerandom/buttontransition-group

tagdiv

:keyitem.id{{item.value}}/div/transition-group/div

/templatestyle