交错过渡效应

花哨，华而不实.真香。

基于vue，你需要使用和理解vue的过渡和过渡组。

过渡

Vue的文档详细分析了转换组件。

以下是我的理解：

Transformation是vue提供的一个抽象组件，它将帮助我们在正确的时间操作其包装的子元素。

合适的时机是：

BeforeEnter dom是从js生成的，并且刚刚插入到页面中(对应于下面的动画)。enter dom被插入到页面后的下一帧(对应于下面的动画)。在进入dom动画完成后(对应于下面的动画)

过渡群

转换组组件将分批对包列表中的每个元素执行转换组件的操作。

超文本标记语言

div id='app' @click='num===0？num : num=5 ' transition-group name=' list ' item v-for=' n in num ' : key=n//transition-group/div CSS。列表-输入{ opa city 3360 0；transform : translateY(100%)；}.列表-输入-活动{ transition:3s}/* enter-to实际上可以在不显式写入的情况下写入，这是默认的opa city 3360 1；transform:无；*/.list-enter-to { opa city 3360 1；transform : translateY(0)；}

然后给每个列表项添加不同的延迟。

过渡延迟

钢性铸铁。list-enter-active : th-child(5n 2){ transition-delay : 3s；}.list-enter-active : th-child(5n 3){ transition-delay : 5s；}.list-enter-active : th-child(5n 4){ transition-delay : 7s；}.list-enter-active : th-child(5n 5){ transition-delay : 9s；}

使用带有css选择器的转换延迟确实可以实现交错转换，

但是缺点很明显，写大量的css是不灵活的。

然后我们使用vue的JavaScript钩子来实现它。

定时器

超文本标记语言

div id='app' @click='num===0？num : num=5 '！-在此添加v-bind:css='false '以使vue跳过css检测。让我们更好地控制动画完成的时间-过渡-组v-bind : CSS=' false ' v-: before-enter=' before enter ' v-3360 enter=' enter ' v-3360 before-enter=' before '在num' :键中输入' Item v-for=' (n，index)后=n : data-delay=index * 100//过渡-组/div当只有JavaScript用于过渡时，done必须用于回调否则，它们将被同步调用，转换将立即完成。

Newvue ({el:' # app '，data: ()=({num33600})，methods : {//让我们做vue在钩子中为我们做的事情：输入前输入后输入。//添加和删除类名，并监听transitionend事件。before EnTER(DOM){ DOM . class list . add(' list-enter '，' list-enter-active ')；}，输入(dom，done){ let delay=DOM . dataset . delay；setTimeout(function(){ DOM . class list . remove(' list-enter '))；DOM . class list . add(' list-enter-to ')；//监听transitionend事件var transition end=window . ontrol transition end？transitionend ' : ' WebKittrantionend '；DOM . addeventlistener(transition end，函数OnEnd(){ DOM . removeeventlistener(transition end，OnEnd)；done()；//调用done()告诉vue动画结束，从而触发afterEnter钩子})；}，delay) }，after enter(DOM){ DOM . class list . remove(' list-enter-to '，' list-enter-active ')；} } })

目前运行良好，达到了交错过渡的效果，不需要写大量的css。

回顾过去，我们做了两件事，使用。列表-输入。列表输入到和设置输出

告诉浏览器在不同时间将列表项从不透明度0平移(100%)转换为不透明度1平移(0)。

告诉浏览器元素的不同状态，除了类名，

我们可以直接操作dom，内联编写样式，

除了根本不写css类名，

可以有更多的可编程性。

风格

超文本标记语言

div id='app' @click='num？num : num=5 ' transition-group v-bind : CSS=' false ' v-: before-enter=' before enter ' v-: enter=' enter ' v-: before-enter=' before '在num ' :键中输入' item v-for='(n，index)后=n : data-delay=index * 100 data-y=' 100% '//transition-group/div new Vue({ 0风格。CSS文本=` transit :3s；opacity: $ {不透明度};变压器：音阶($ { s })translateX($ { x })translateY($ { y })；`;},输入(dom，done){让delay=DOM。数据集。延迟；setTimeout()函数(){ DOM。风格。CSS文本=` transit :3s；opa城市3360 1；变压器：刻度(1)translateX(0)translateY(0)；`;//监听过渡和事件var转换结束=窗口。ontrantionend？transitionend ' : ' WebKittrantineoend '；多姆。addeventlistener(转换结束，函数OnEnd(){ DOM。removeeventlistener(转换结束，OnEnD)；done()；//调用完成()告诉某视频剪辑软件动画已完成，以触发输入后钩子});}，延迟)}，在EnTER(DOM){ DOM }之后。风格。CSS文本=' '；} } })

嗯不错，不过既然都上射流研究…了，能限制的就只有你的想象力了。

超文本标记语言

num ' :键=n :数据-延迟=索引* 100 :数据-x='索引% 2===0 '中的项v-for='(n，index)'-50% ' : ' 50% ' ' : data-y=' getRandom()' % ' : data-s=' math。random()'/getRandom(){ var rate=math。地板(数学。随机()* 90 ^ 10)；返回Math.random() 0.5？费率： -1 *费率；}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。