你好，老师，关于transform位移过渡效果的问题

来源：4-4 过渡动画-css实现过渡（上）

慕娘6352887

2017-06-30

您的例子里，使用.my-trans-enter{transform:translateY(-500px);}效果是从屏幕上方向下位移500px到元素起始位置。使用.my-trans-leave-active{transform:translateY(500px);}效果是从元素起始位置向下位移500px。我看了W3c网站的一个例子http://www.w3school.com.cn/tiy/c.asp?f=css_transform_translate后，对您的代码不理解。W3C的这个例子很明显是有个坐标远点的，负数和正数的位移是相反方向的。但是您这里实际上都是一个向下的方向？这是为何？另外vue官方文档的例子.slide-fade-enter, .slide-fade-leave-active {transform: translateX(10px);opacity: 0;} 设置的都是正数的位置，为何最后位移方向刚好是相反的。给我的感觉就好像是每一个过渡阶段坐标原点不一样了，而且连正负方向的定义也不一样了。

写回答

1回答

fishenal

2017-06-30

坐标原点都是左上角啊，默认值没动过。

这里的tranlate要配合vue提供的过渡阶段来看，my-trans-enter是动画进入的过程，从无到有的时候，这里的tranlsteY(-500px)标记的是，我从-500px的位置到0的位置，0就是进入，-500px就是从上部看不见的地方滑下来，到0；

my-trans-leave-active 是出去的过渡，是从0 到500， 500 在下面，当然就是从下滑出去。

fishenal

慕娘6352887

现实和隐藏就是两种状态，可以相互切换，先哪个无所谓，这两个状态之前都是可以切换的，只是用到了不同的状态class。w3c的例子是姜杰translateY的状态，负值当然是在上面，负值用在vue的进入阶段，就是从上面滑下来。我觉得你想得有点复杂，其实很简单，vue只是在状态之间切换了一些class，不用tranlate你可以用一些别的css去查看这个阶段怎么转换的。

2017-07-03

共4条回复

最容易上手的Vue2.0入门实战教程

快速入门Vue2.0，组件化开发一个数字产品电商平台

3966 学习 · 999 问题

查看课程

相似问题

老师你好，关于动画的触发问题有几个问题想请教

回答 2

想让老师指点我一下锤子官网的那个轮播图大体思路

回答 2

老师，问你个问题

回答 1

老师，您好，我有一个问题，您帮我看看。

回答 1

关于data引用赋值问题

回答 2

打开慕课网App查看更多内容