transition:颜色 变换延续的时间 变换速率 transition:background-color 0.3s linear 变换速率： 1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0). 2、linear：（匀速），linear 函 ...
分类：
其他好文 时间：
2017-11-07 19:47:23
阅读次数：
193
01. 概述 W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。 这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。” 简单的来说就是通过某一个事件改变了元素的c ...
分类：
Web程序 时间：
2017-11-02 00:55:47
阅读次数：
295
今天小颖把之前保存的js特效视频看了一遍，跟着视频敲了敲嘻嘻，用原生js实现一个炫酷的登录页面。怎么个炫酷法呢，看看下面的图片大家就知道啦。 效果图： 不过在看代码之前呢，大家先和小颖看看css中的opacity、transition、box-shadow这三个属性。 1.opacity 作用：设置 ...
分类：
Web程序 时间：
2017-10-31 21:33:34
阅读次数：
324
Vue 使用了一个叫 FLIP 简单的动画队列，使用 transforms 将元素从之前的位置平滑过渡新的位置。 html代码： <style> .list-item { transition: all 1s; display: inline-block; height: 20px; width: ...
分类：
其他好文 时间：
2017-10-31 17:34:46
阅读次数：
649
transition transition transition允许css的属性值在一定的时间区间内平滑地过渡，语法如下： transform transform transform 分为2D 和 3D，这里暂时只介绍比较常用的2D transform，其主要包含以下几种变换：旋转rotate、扭曲 ...
分类：
Web程序 时间：
2017-10-29 14:33:41
阅读次数：
256
今天看到哔哩哔哩图片站的图片hover效果，看了下f12，写了个demo。codepen代码如下https://codepen.io/bhaltair/pen/zPOxry原理是：利用图片容器设置transform: scale(1.1)，并且设置transition: transform 0.5s... ...
分类：
Web程序 时间：
2017-10-27 01:14:55
阅读次数：
379
本篇文章，我们来讲一下keep-alive的实现。 Vue中，有三个内置的抽象组件，分别是keep-alive、transition和transition-group， 它们都有一个共同的特点，就是自身不会渲染一个DOM元素，也不会出现在父组件链中。 keep-alive的作用，是包裹动态组件时，会 ...
分类：
其他好文 时间：
2017-10-19 10:23:22
阅读次数：
299
1.鼠标移动到div中背景颜色慢慢变化（1个属性的变化） <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #block{ width: 400px; height: 400px; background: bl ...
分类：
Web程序 时间：
2017-10-18 21:44:24
阅读次数：
186
需求：某dom节点在正常情况下，有设置其transition-duration为1s，在mousemove时候，要去掉其transition-duration设置的时间，在mouseup时候，恢复其transition-duration时间为1s。 考虑到兼容性，故设置的属性相关属性有： trans ...
分类：
其他好文 时间：
2017-10-13 19:05:21
阅读次数：
138
前面的话 前面分别介绍了单元素过渡的CSS过渡和JS过渡，本文将详细介绍Vue多元素过渡 常见示例 最常见的多标签过渡是一个列表和描述这个列表为空消息的元素： <transition> <table v-if="items.length > 0"> <!-- ... --> </table> <p ...
分类：
其他好文 时间：
2017-10-03 23:31:39
阅读次数：
232
