技术概述 ? 需求是实现一个包含三种状态，分别是底部、半屏、全屏的浮层，并且浮层支持用户随意拖动，同时还要防止用户过度拖动。技术难点在于对动画的控制，必须得有一定的过渡动画否则整体会很突兀。 技术详述 ? 首先看一下预期的样子，图为ios自带高德地图的底部浮层。 ? 最开始的动画我是用CSS的key ...
分类：
微信 时间：
2021-06-28 19:15:24
阅读次数：
0
Vue版本：2.6.1 前言：本文主要是为了分清Vue的过渡状态中，什么是进入，什么是离开 一、进入（enter），即从无到有、从隐藏到显示（或添加节点）的阶段，与当前需要过渡元素的显示隐藏无关 离开（leave），即从有到无、从显示到隐藏（或删除节点）的阶段，与当前需要过渡元素的显示隐藏无关 二、 ...
分类：
其他好文 时间：
2021-04-15 12:50:23
阅读次数：
0
###前言上篇文章主要讲述了CSS样式更改中的2D转换，这篇文章我们来介绍下CSS样式更改中的过渡、动画基础用法。####1.过渡元素从一种样式逐渐改变为另一种的样式div{transition:width1s;-moz-transition:width1s;/*Firefox4*/-webkit-transition:width1s;/*Safari和Chrome*/-o-transition:
分类：
Web程序 时间：
2020-09-17 23:37:08
阅读次数：
47
CSS帧动画 基础知识 通过定义一段动画中的关键点、关键状态来创建动画。@Keyframes相比transition对动画过程和细节有更强的控制。 过渡动画是两个状态间的变化，帧动画可以处理动画过程中不同时间的细节变化， 对过渡动画理解后再学习习帧动画会非常容易，也可以把帧动画理解为多个帧之间的过渡 ...
分类：
Web程序 时间：
2020-07-24 09:27:49
阅读次数：
102
如要增加一个 CSS body { overflow: hidden; } 低性能方案 网络一般流传的都是：通过操作 DOM 的style 属性来简洁改变 CSS 的方法 但有肉眼可见的延迟（在后面加个过渡动画你就知道） document.querySelector("body").style.ov ...
分类：
编程语言 时间：
2020-06-14 14:26:43
阅读次数：
81
css3动画 animation 使用css3动画需要2步 为指定元素添加animation属性及属性值。各浏览器私有属性在前，通用属性在最后。 使用@keyframes定义动画过程名称。各浏览器私有属性在前，通用属性在最后。 animation定义动画的属性值。 @keyframes规则内指定一个 ...
分类：
其他好文 时间：
2020-05-31 16:30:10
阅读次数：
53
对于移动端的Web单页应用来说，为了达到媲美原生应用的效果，页面过渡动画是必不可少的。常用的页面过渡动画包括： 位移——当前页向左侧或右侧水平移出可视区，下一页由反方向移入可视区。 不透明度变化——当前页淡出，下一页淡入。 1和2同时进行。 （注意：以下讨论和实验均在 Chrome 68 浏览器环境 ...
分类：
其他好文 时间：
2020-05-30 15:28:08
阅读次数：
51
有时候没动画 有几次使用vue+animate.css竟然无法做出动画, 原因是vue的动画播放只在v if或v show切换显示/隐藏对象时才会触发. 推荐还是可以自己写过渡动画, 方法如下: html ` hello ` css `.fade enter active, .fade leave ...
分类：
其他好文 时间：
2020-05-18 16:33:12
阅读次数：
452
效果图 实现原理 利用vue的生命周期 钩子函数 来触发变量修改; css的过渡动画属性 .可以参考这里： " transform transition 通过类名实现文字动画过渡" 具体逻辑代码 组件 1 登录 DOM上使用vue的class绑定一个控制变量ifActiveCustomStyle， ...
分类：
Web程序 时间：
2020-05-05 10:57:02
阅读次数：
99
jQuery css3打开遮罩图片形状过渡动画效果https://www.mk2048.com/demo/demo_target_desc.php?id=hkbkk0ikjjQuery css3图片动画效果。jQuery自定义图片上做标记代码点击》jQuery自定义图片上做标记代码jQuery图片标 ...
分类：
其他好文 时间：
2020-04-25 23:37:23
阅读次数：
74
