妙使用 scale 与 transfrom-origin,精准控制动画方向

  • 时间:2018-08-28 22:08 作者:java面试笔试 来源:java面试笔试 阅读:139
  • 扫一扫,手机访问
摘要:作者:ChokCocohttp://www.cnblogs.com/coco1s/p/8882542.html上次发完 不可思议的纯 CSS 导航栏下划线跟随效果 这篇文章之后,很多朋友找我探讨,感叹 CSS 的奇妙。而后昨天,群里一位朋友问到了一个和这个效果比较相似的效果,问如何将下面这个动画的下

作者:ChokCoco

http://www.cnblogs.com/coco1s/p/8882542.html

上次发完 不可思议的纯 CSS 导航栏下划线跟随效果 这篇文章之后,很多朋友找我探讨,感叹 CSS 的奇妙。

而后昨天,群里一位朋友问到了一个和这个效果比较相似的效果,问如何

将下面这个动画的下划线效果,从左进入,右边离开修改为从上方进入,下方离开。

形容很难了解,看看本来的效果:

妙使用 scale 与 transfrom-origin,精准控制动画方向

难点所在

第一眼看到这个效果,我的内心毫无波澜。以为只是简单的一个下划线 hover 效果,经过友人提示,才发现,这个动画效果中,下划线是从一端进入,从另外一端离开的。而且,这个 hover 动画是纯 CSS 实现的。

妙使用 scale 与 transfrom-origin,精准控制动画方向

先不考虑上面说的修改需求,先想一想,假如就是复原上述效果,仅仅用 CSS,该如何做呢?

复原效果

嗯,正常而言,我们一个 hover 效果,可能就是从哪里来,回哪里去,大部分的应该是这样的:

妙使用 scale 与 transfrom-origin,精准控制动画方向

demo:https://codepen.io/Chokcoco/pen/JvjOxd

现在,难点就在于如何在 hover 离开的时候,改变动画行进的方向。

下面我们将一个 hover 动画分解为 3 个部分:

  1. hover 进入状态
  2. hover 停留状态
  3. hover 离开状态

但是,对于一个 hover 效果而言,正常来说,只有初始状态,和hover状态两种。可能我们的代码是这样:

div {

xxxx...

}

div:hover {

xxxx...

}

对于一个 hover transition 动画,它应该是从:

正常状态 -> hover状态 -> 正常状态 (三个步骤,两种状态)

所以,必需要有一种方法,能够使得 hover 动画的进入与离开产生两种不一样的效果,实现:

状态1 -> hover状态 -> 状态2 (三个步骤,三种状态)

实现控制动画方向的关键点

所以,这里的关键点就在于(划重点):

使得 hover 动画的进入与离开产生两种不一样的效果 。

接下来,也就是本文的关键所在,用 transform: scale() 以及 transform-origin 实现这个效果。

transform: scale() 实现线条运动

transform: scale 大家应该都很熟习了,浅显来说是使用于缩放,使用官方的话说,就是:

CSS 函数 scale() 使用于修改元素的大小。可以通过向量形式定义的缩放值来放大或者缩小元素,同时可以在不同的方向设置不同的缩放值。

这里我们用 transform: scaleX(0) 与 transform: scaleX(1) 来改变线条的显示与隐藏,它的 CSS 代码简单来看,可能是这样:

div {

position: absolute;

width: 200px;

height: 60px;

}

div::before {

content: "";

position: absolute;

left: 0;

bottom: 0;

width: 200px;

height: 2px;

background: deeppink;

transition: transform .5s;

transform: scaleX(0);

}

div:hover::before {

transform: scaleX(1);

}

妙使用 scale 与 transfrom-origin,精准控制动画方向

demo:https://codepen.io/Chokcoco/pen/LmEVBg

嗯?为什么是要使用 transform: scale() 来实现线条的动画?由于它可以配合 transform-origin 实现动画的不同运动方向:

transform-origin 实现线条运动方向

transform-origin 让我们可以更改一个元素变形(transform)的原点,transform-origin 属性可以用一个,两个或者三个值来指定,其中每个值都表示一个偏移量。 没有明确定义的偏移将重置为其对应的初始值。

本效果最最最重要的地方就在于这里,我们用 transform-origin 去改变 transform: scale() 的原点实现线条运动的方向。

我们给线条设置一个默认的 transform-origin 记为状态1

hover 的时候,设置另外一个不同的 transform-origin, 记为状态2

所以,当然我们 hover 的时候,会读取状态2的transform-origin,从该原点开始放大至 scaleX(1),hover 离开的时候,会读取状态1的transform-origin,从scaleX(1)状态缩小至该原点。

嗯,CSS代码大概是这样:

div {

position: absolute;

width: 200px;

height: 60px;

}

div::before {

content: "";

position: absolute;

left: 0;

bottom: 0;

width: 200px;

height: 2px;

background: deeppink;

transition: transform .5s;

transform: scaleX(0);

transform-origin: 100% 0;

}

div:hover::before {

transform: scaleX(1);

transform-origin: 0 0;

}

这里,我们巧妙的通过 hover 状态施加了一层新的 transform-origin ,让动画的进入与离开产生了两种不同的效果,两个不同的方向。

如此一来,也就顺利实现了我们想要的效果,撒花:

妙使用 scale 与 transfrom-origin,精准控制动画方向

demo:https://codepen.io/Chokcoco/pen/Bxyoyz

注意,这里用了 transform-origin 去改变 transform: scale() 的原点实现线条运动的方向,而没有借助诸如 position 位移,transform: translate(),或者者 margin 等位置属性去改变线条所在的位置。

所以,有趣的是,线条其实没有产生过任何位移,这里其实也是障眼法,让它看上去,它如同在移动。

拓展延伸

嗯,有了上述方法,也就是 transform: scale() 配合 transform-origin ,我们可以开始随便改变动画的初始与结束状态了。把他们运使用到其余效果之上,简单的几个示意效果:

妙使用 scale 与 transfrom-origin,精准控制动画方向

demo:https://codepen.io/Chokcoco/pen/ELxmwE

值得注意的点

还有几个点是比较有意思的,大家可以尝试尝试,思考思考:

  • 尝试改变两种状态的 transition-timing-function 缓动函数,可以让动画更加流畅具备美感;
  • 注意一下,线条的 transition 设置的是 transition: transform .5s 而不是 transition: all .5s,体验一下两种写法所产生的不同效果。
  • 全部评论(0)
最新发布的资讯信息
【系统环境|】WEB前端学习:JS实现中文简体繁体切换(2019-08-22 12:38)
【系统环境|服务器应用】前台开发入门到实战:HTML5语义化元素你真的用的正确吗?(2019-08-22 04:16)
【系统环境|服务器应用】Vue仿微信app页面跳转动画(2019-08-22 04:16)
【系统环境|服务器应用】webstorm使用快捷键快速修正单个文件的style(2019-08-22 04:16)
【系统环境|服务器应用】程序员从学生到阿里经历的5次蜕变:海阔凭鱼跃,天高任鸟飞(2019-08-22 04:16)
【系统环境|服务器应用】var、let、const的区别(2019-08-22 04:16)
【系统环境|服务器应用】mini-ui加载框Indicator 被遮挡问题(2019-08-22 04:15)
【系统环境|服务器应用】【对讲机的那点事】玩对讲机,对于对讲机的亚音你理解吗?(2019-08-22 04:15)
【系统环境|服务器应用】前台中高级面试,内功心法(上)(2019-08-22 04:15)
【系统环境|服务器应用】17、改进轮播图之功能封装(2019-08-22 04:15)
手机二维码手机访问领取大礼包
返回顶部