前言 上一篇 css3 动画（一） transition 中，介绍了 transition 的用法。其中 transition 包含四个可设置的属性： 有过渡效果的属性 过渡时长 过渡函数？ 过渡时延 其中，1、2 以及 4 都挺好理解的，但是 3 是个什么东西？其实 3 是 css3 中的 tim ...
分类：
Web程序 时间：
2020-06-02 11:07:35
阅读次数：
84
最近做一个项目，项目中用到显示屏比较大，3840*1080，为了充分发挥大屏的显示区域，有一个分屏的功能，将大屏分为两个小屏，独立显示。在实现这个需求的时候使用了虚拟屏来实现小屏。为了过渡效果的平滑，需要做一些切换动画，其中一个点是要抓取虚拟屏的screenshot。 刚开始我使用了SurfaceC ...
分类：
移动开发 时间：
2020-05-24 15:18:00
阅读次数：
125
过渡效果（Transition）插件提供了简单的过渡效果。 Transition.js 是 transitionEnd 事件和 CSS 过渡效果模拟器的基本帮助器类。它被其他插件用来检查 CSS 过渡效果支持，并用来获取过渡效果。 使用案例 过渡效果（Transition）插件的使用案例： 具有幻灯 ...
分类：
其他好文 时间：
2020-05-16 14:02:25
阅读次数：
77
.vogueHover { width: 100%;height: 100%; position: absolute; left: 0; top: 0; background: #001e50; z-index: 9999; opacity:0 } .vogueHover:hover { trans ...
分类：
Web程序 时间：
2020-05-15 15:39:21
阅读次数：
58
由于hover伪类添加的动画效果，仅当鼠标放在元素上时会被触发，而当鼠标离开时，效果会中断，会显得很生硬。 大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦，CSS3便可以帮你解决这些问题。 <!DOCTYPE html> <html ...
分类：
Web程序 时间：
2020-05-11 18:55:22
阅读次数：
430
效果图 实现原理 利用vue的生命周期 钩子函数 来触发变量修改; css的过渡动画属性 .可以参考这里： " transform transition 通过类名实现文字动画过渡" 具体逻辑代码 组件 1 登录 DOM上使用vue的class绑定一个控制变量ifActiveCustomStyle， ...
分类：
Web程序 时间：
2020-05-05 10:57:02
阅读次数：
99
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http ...
分类：
Web程序 时间：
2020-05-02 22:43:34
阅读次数：
98
一丶jq/zepto animate()方法 可以细化操作，回调方法，但是在移动端（安卓）卡顿 二丶css3 animation 可以用@keyframes细化过渡效果，没有回调操作，只能监控animation/transition是否已完成。 三丶transform 过渡top/left 导致重绘 ...
分类：
移动开发 时间：
2020-04-30 23:24:21
阅读次数：
92
是基本的动态组件，所以我们可以用 组件给它添加一些过渡效果： Transition 的所有功能 在这里同样适用。单个路由的过渡上面的用法会给所有路由设置一样的过渡效果，如果你想让每个路由组件有各自的过渡效果，可以在各路由组件内使用 并设置不同的 name。const Foo = { template... ...
分类：
其他好文 时间：
2020-04-22 09:49:36
阅读次数：
78
图片hover之后等比例放大，鼠标移开又等比例恢复原状，同时带有动画过渡效果 使用CSS3中的transform属性； ...
分类：
Web程序 时间：
2020-04-01 00:32:37
阅读次数：
96
