实践

这里将通过四个实践小案例来体验和学习钢性铸铁过渡，css动画，javascript钩子，列表过渡的应用。至于案例用到的知识点就请自行学习官网文档。

1.css过渡实践

先来看看演示效果：

这个案例其实很简单，通过一个过渡来触发多个子元素的过渡效果，我们只需要定义元素对应的过渡效果就可以，其他事情某视频剪辑软件会帮我们搞定，由此可以扩展出其他酷炫的过渡场景效果。先来看看这个简单案例的代码实现：

template div class=' app ' button @ click=' show menu ' class=' BTN ' { text } }/button transition name=' move ' div class=' menu ' v-show=' show ' div class=' inner-1 ' 1/div class=' inner-2 ' 2/div class=' inner-3 ' 3/div/transition/div/template script type=' text/ecmascript-6 '导出默认{ data(){返回{ show : false }；}，方法： { show menu(){ this。show=！这个节目. } }，计算出： { text(){返回此。表演？'收' : '开；} } };/scriptstyle lang="手写笔" rel="样式表/手写笔"。应用程序.按钮位置：固定底部： 50px右侧： 10px z-index: 10宽度： 50px高度： 50px线条-高度： 50px边框-半径： 50%边框：无轮廓：无颜色： #fff字体-尺寸： 18px背景：蓝色菜单位置：固定底部： 50px右侧： 10px宽度： 50px高度： 50px边框半径： 50%过渡：所有。7s轻松进入。移动-输入-激活。内部转换：平移3d(0，0，0)转换-定时-函数：三次贝塞尔曲线(0.57,44,1.97)。内部-1跃迁-延迟：1s .内部-2过渡-延迟：2s .内部-3过渡-延迟：3s .移动-进入。移动-离开-激活。内部过渡-计时-功能：放松。内部-1变压器：平移3d(0，60px，0)过渡-延迟：3s .内部-2变压器： translate3d(40px，40px，0)转换-delay:2s .内部-3变压器：平移3d(60px，0，0)转换-delay:1s .内部显示：内嵌块位置：绝对宽度： 30px高度： 30px线条-高度： 30px边框-半径： 50%背景：红色文本-对齐3360中心颜色： #fff过渡：所有。4。内部-1顶部： -50px左侧： 10px .内部-2左侧： -30px顶部： -30px .内侧-3左侧： -50px顶部： 10px/样式可以看到我们的代码基本主要是完成钢性铸铁过渡效果的样式，而触发过渡效果只是简单地通过一个点击事件就搞定了，vue会自动嗅探目标元素是否有半铸钢钢性铸铁(铸造半钢)过渡或动画，并在合适时添加/删除半铸钢钢性铸铁(铸造半钢)类名。那下一个演示就来简单实现一下使用钢性铸铁动画做过渡的效果。

2.css动画实践

先来看看演示效果：

这个案例其实跟上面的演示差不多，不同之处在于过渡效果是使用钢性铸铁动画来实现，看下实现的代码：

template div class=' app ' button @ click=' show ball ' class=' BTN ' show/button transition name=' move ' type=' animation ' div class=' ball ' v-show=' show ' div class=' inner '/div/div/transition/div/template script type=' text/ecmascript-6 '导出默认{ data(){返回{ show 3360 false }；}，方法： { show ball(){ this。show=！这个节目。} } };/scriptstyle lang='手写笔rel='样式表/手写笔@关键帧形状更改{ 0%，100% {边框半径： 50%背景：红色} 50% {边框半径： 0 0背景：蓝色} } @关键帧move ball-in { 0% { transform : translate 3d(300 px，-200px，0)} 50% { transform : translate 3d(100 px，-100 pxapp .按钮宽度： 40px高度： 30px边距-top: 40px边框：无边框：无背景：红色： #fff .球位置：绝对底部： 20px左侧： 20px宽度： 50px高度： 50px过渡：全1s三次贝塞尔曲线(.22,-0.86,97,58)。移动-进入-活动opacity: 1动画：移动球-进入1s .内部动画：形状改变1s .移动-离开-活动opacity: 0.8动画：移动球出1。内部动画：形状改变1s .内部显示：内嵌-块宽： 30px高： 30px边框-半径： 50%背景：红色过渡：全一线性/样式从钢性铸铁代码可以看出，我们只是在某视频剪辑软件过渡类名下加了不同的动画而已。官网文档明确说明当只使用过渡或动画其中一种时，vue是能自动监听对应的类型的，但是如果同一个元素同时使用两种效果，就需要明确指定监听哪一种类型，不过官网并没有给出具体的栗子。那其实这个演示已经简单地实现同时使用两种类型的情况，可以看到有一个透明度的变化。但是假如动画里使用了变换，并且外面也使用了改变的话，那么元素在过渡的时候动画效果就会有冲突，效果就有点出入了。

3.Java脚本语言钩子 实践

前两个栗子都是有进入和离开的过渡，但是如果一些场景只需要进入过渡然后就结束了，那么这时就可以使用Java脚本语言钩子结合半铸钢钢性铸铁(Cast Semi-Steel)过渡/动画来实现，当然也可以单独使用。看下演示：

这个一个非常低的的模拟炮弹发射的场景，可以看到小球有抛物线轨迹运动的过渡，而且发射出去就不会再回来了，那么这个演示就是使用了Java脚本语言钩子结合钢性铸铁来实现的，接下来看下关键代码：

template div class=' app ' div class=' gun ' @ click=' launch($ event)'/div class=' shell-wrapper ' transition v-for=' shell in shell ' name=' launch-shell ' @ before-enter=' before enter ' @ enter=' after-enter=' before ' div class=' shell ' v-show=' shell。show ' div class=' inner '/div/transition/div class=' goal '/div！-小球第二种-div class=' ball-container ' ul Li v-for='(ball，index)in balls ' : key=' index ' transition : CSS=' false ' name=' drop ' @ before-enter=' before drop ' @ enter=' dropping ' @ after-enter=' after drop ' div class=' ball ' v-show=' ball。show ' div class=' inner-hook '/div/div/transition/Li/ul/div！-小球结束/div/模板首先，由于本身这个演示是一组元素的过渡，所以有些童鞋就会觉得用2.0提供的过渡群不就行了嘛。不过过渡群是列表过渡，我的理解是那一组元素是相关联的、互相影响的，但是这个演示的元素每个都是独立的，只不过是一组独立的元素过渡，所以还是用过渡比较合理，那使用迭代就可以实现一组相同过渡的元素啦。接下来看Java脚本语言钩子怎么实现这个过渡：

导出默认值{ data(){ return { shell :[{ show: false }，{ show : false }，{ show : false }]}；}，methods: { launch (event) { for(让I=0；我这个。贝壳。长度；I){ 0让shell=这个。贝壳[I]；if(！贝壳。show){ shell。show=true贝壳。目标=事件。目标；返回；} } }，在EnTER(El){ let count=this之前。贝壳。长度；while(count-){ 0让shell=这个。shell[count]；if(shell。show){ let rect=shell。目标。getboundingclientrect()；让左=右。左-32；让top=-(窗口。内部高度-矩形。top-15)；埃尔。风格。display=埃尔。风格。webkittransform=` translate 3d(0，${top}px，0)`；埃尔。风格。transform=` translate 3d(0，${top}px，0)`；让内心=El。getelementsbyclassname(' inner ')[0]；内心。风格。webkittransform=` translate 3d($ { left } px，0，0)`；内心。风格。transform=` translate 3d($ { left } px，0，0)`；} } },输入(el，done){/* eslint-disable no-unused-vars */let refresh=El。偏右；这个$ NextTick(()={ El。风格。WebKittransform=' translate 3d(0，0，0)'；埃尔。风格。transform=' translate 3d(0，0，0)'；让内心=El。getelementsbyclassname(' inner ')[0]；内心。风格。webkittransform=' translate 3d(0，0，0 '；内心。风格。transform=' translate 3d(0，0，0)'；});done()；}，在EnTER(El)之后{ let ball=this。shell[0]；ball.show=假声。风格。display=" none} } };钢性铸铁样式代码：球形容器。球位置：绝对左侧： 32px底部： 22px z-index: 50过渡：所有0.4s三次贝塞尔曲线(0.49,-0.29,0.75,0.41)。内部宽度： 16px高度： 16px边框-半径： 50%背景： rgb(0，160，220)转换：所有0.4s线性过渡元素就不需要为其添加某视频剪辑软件的过渡钢性铸铁类名了，只需在元素本身添加过渡即可，那某视频剪辑软件在之前钢性铸铁过渡的时候会自动帮我们去添加对应的类名来完成过渡效果，但是用爪哇岛描述语言钩子就需要我们自己完成这个始末状态的设置了。当我们点击触发一个过渡的时候，我们在输入前里先拿到当前元素的偏移位置，然后给过渡元素设置其起始位置，在进入里需要重新触发下浏览器的重绘，然后在下一帧重新设置元素的结束位置，这时就会产生过渡效果，在过渡完成后我们将当前元素隐藏即可。那刚才讲到的列表过渡，接下来就是关于使用过渡群的一个小演示了。

4 .过渡组实践

先看下演示效果：

其实就是个简单的待办事项列表的小演示，可以看到，当其中一个元素过渡的时候，会影响其他元素的过渡。当然，删除按钮其实本身也是一个过渡过渡，也就是说可以在过渡群里使用过渡，看下相关代码：

template div class=' app ' button @ click=' add ' class=' add-BTN '/button transition-group name=' slide ' tag=' ul ' class=' list-wrapper ' Li class=' list ' v-for='(item，index)列表中的列表v-touch 3360 swappeleft=' showbtn。bind(this，index)' v-touch 3360 swapperight=' hide BTN。bind(this，index)' : key=' item ' span class=' text ' { item删除/按钮/过渡/Li/过渡-组/div/模板有个小坑的地方就是，之前看官网列表过渡的栗子，它是一个数组，元素都是数字，并且每一项都必须设置唯一的键值。所以我完成演示的时候就自作聪明地将索引值传给关键，结果过渡老是不对，后来换成对应的项目就正常了（生无可恋脸)。这个演示用到了轻触，虽然开源代码库上说不支持2.0版本了，但是有一个然后分支是支持的，只需在项目下安装它即可：

sudo NPM安装-保存git ://github。com/vuejs/vue-touch。git #下一个

这里看下主要的样式：列表显示：柔性宽度： 100%高度： 40px线高： 40px边距-底部： 10px颜色： # 666字号： 14px背景： # eee transit : all。4s .滑动移动转换：转换1s .滑动输入变换：转换3d(-100%，0，0).滑动-离开-活动位置：绝对转换：平移3d(-100%，0，0):最后一个子边距-底部： 0。del-BTN flex : 0 60px边框：无轮廓：无颜色： # fff背景：红色过渡：全部。4s .移动-进入。移动-离开-激活变压器：平移3d(70px，0，0).文本flex: 1填充-左侧： 20px如果改变定位过渡的期间与进入离开一样的话，其实可以不用-走吧，这里设置-快走的过渡的期间不同于元素进入离开的期间产生一种速度差，看起来舒服点。而且-离开-活跃需要设置绝对位置：才会有效果。现在看来其实列表过渡也是很容易实现的。

ps:下面看下vue.js 2 .* 使用过渡实现动画效果

过渡名称=' fade ' div class=' detail ' v-show=' detail show '/div/transitionscript type=' text/ecmascript-6 '导出默认值{ };/scriptstyle lang='手写笔ref='工作表样式/手写笔。淡入激活。淡入淡出激活opa城市33601公交：全1.0s背景： rgba(7，17，27，0.8).淡入。淡入淡出激活opa城市3360 0背景： rgba(7，17，27，0)/风格总结

以上所述是小编给大家介绍的vue2.0中使用过渡实现动画效果使用心得，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！