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

Question

您的例子里，使用.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;} 设置的都是正数的位置，为何最后位移方向刚好是相反的。给我的感觉就好像是每一个过渡阶段坐标原点不一样了，而且连正负方向的定义也不一样了。

Answer 1

fishenal 2017-06-30 16:35:45

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

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

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

• 提问者 慕娘6352887 #1

  看了文档里过渡效果那个阶段图。我理解为，过渡效果必须是先进入阶段再出去阶段，初始隐藏（opacity），从无到有的过程。但是看了您这个例子，我发现不尽然，也可以从先从有到无(离开阶段)，再从无到有（进入阶段）。是吗？区别就在于看元素初始状态是显示还是隐藏的。如果初始是显示的，那么先leave阶段，如果初始是隐藏的，那么先enter阶段。

• 提问者 慕娘6352887 #2

  还有，如果初始状态是隐藏，那么应该leave阶段后enter阶段，如果此时trans-leave-active｛translateY：-500px｝，表示：从起始位置，向上方位移500px，如果此时trans-leave-active｛translateY：500px｝表示从起始位置，向下方位移500px。如果此时trans-enter｛translateY：500px｝表示相对起始位置，从下方500px处，位移到起始位置。如果此时trans-enter｛translateY：-500px｝表示相对起始位置，从上方500px处，位移到起始位置.   这样理解对吗。同样的，如果元素初始状态是显示的。也是同样的逻辑，这样理解对吗？

• 提问者 慕娘6352887 #3

  我之所以有这些困惑。是因为看了w3c的例子。从它的例子里，可以看到一个呈现的效果：translateY：-500px就是从起始位置向上500px处。而vue里,translateY：-500px如果放在enter阶段，呈现的效果却是从起始位置上方500px处，位移到起始位置。和w3c给的例子呈现的效果是矛盾的。同样的translateY：-500px、却不一样的位移效果。这就是我矛盾困惑的地方。才有那么多问题。

点开查看后面1条评论