Vue代码里实现过渡动画效果

发表于 | 阅读次数: | 本文总阅读量 次

前言

这里想要实现一个点击下拉菜单选择时将下拉菜单移动到页面顶部，实现想法是：获取当前dom节点距离屏幕的高度，然后利用transform的translateY属性将下拉菜单从原位移动到顶部，这里要注意向下为正数，向上为负数。

实现

1
2
3
4
5
6
7
// 点击上移
const height = this.$refs.dropdown.$el.offsetTop;
this.$refs.dropdown.$el.style = `transition: all 0.1s linear;transform: translateY(-${height}px)`;
// 要在动画完成后再定位
setTimeout(() => {
  this.$refs.dropdown.$el.style = 'position: fixed;top: 0px;left: 0px;right: 0px;bottom: 0px;';
}, 100)

css属性 2D转换方法

CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。
以下使用方法都是transform: translateX(21px);

  1. translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
  2. translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
  3. translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素
  4. scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
  5. scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
  6. scaleY(n) 定义 2D 缩放转换，改变元素的高度。
  7. rotate(angle) 定义 2D 旋转，在参数中规定角度。
  8. skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
  9. skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
  10. skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。