花式使用CSS3 transition

DobbyKim 发布于2019-08-19 17:17 / 2052人阅读

摘要：欢迎交换友链进击的程序媛微博江小湖本文讲介绍控制六种方法触发，以及事件的使用。事件事件会在结束后触发。有没有渐变开始的事件目前只有有事件，目前未有此标准。

欢迎交换友链 Laker"s Blog--进击的程序媛
Github：https://github.com/younglaker
微博: 江小湖Laker

本文讲介绍:hover、:active、:focus、:checked、Media Queries、JavaScript控制六种方法触发CSS3 transition，以及 transitionend 事件的使用。

:hover

最常见的是用hover：

:hover

.hover {
  width: 100px;
  height: 100px;
  background: #222;
  color: white;
  text-align: center;
  transition: all 2s ease;
}
.hover:hover {
  width: 200px;
  height: 200px;
}

Demo

:active

mousedown s时触发：

:active

.active {
  width: 100px;
  height: 100px;
  background: #222;
  color: white;
  text-align: center;
  transition: all 2s ease;
}
.active:active {
  width: 200px;
  height: 200px;
}

Demo

:focus

文本框聚焦时（这个在很多网站的搜索框的动画效果里用到）：


  


  


.focus input, .focus textarea {
  width: 200px;
  transition: width 1s ease;
}

.focus input:focus, .focus textarea:focus {
  width: 300px;
}

Demo

:checked

用于checkboxes 和 radio buttons 被选中时：


     Input 1

     Input 2

     Input 3

   Input 4


    
input[type="checkbox"]:checked {
  height: 20px;
  transition: all 1s ease;
}

input[type="checkbox"]:checked {
  width: 30px;
}

Demo

Media Queries

改变浏览器窗口大小时触发：

media

.media {
  width: 200px;
  height: 200px;
  background: #222;
  color: white;
  text-align: center;
  transition: width 1s ease;
}

@media only screen and (max-width : 960px) {
  .media {
    width: 100px;
    height: 100px;
  }
}

Demo

JavaScript事件触发CSS3 transition

通过 JavaScript 或者 jQuery 添加、删除class来完成动画，CSS格式类似:hover。

例如：

以 click 事件为例，当点击方块时，变化长宽、背景色：

HTML:

CSS:

.box {
  width: 200px;
  height: 200px;
    background: black;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}

.box.clicked {
  width: 300px;
  height: 300px;
    background: blue;
}

JavaScript：

$(".box").click(function() {
    $(this).toggleClass("clicked");
});

Demo

如果用原生JavaScript，可以自己写个添加和删除类的函数。

transitionend 事件

transitionend 事件会在 CSS transition 结束后触发。兼容Chrome、Firefox、Safari、IE10+：

element.addEventListener("transitionend", callback, false);

为保证低版本兼容性可以写webkitTransitionEnd（WebKit ）、otransitionend（Opera）、MSTransitionEnd（IE 10+）、transitionend（Mozilla）。详见此讨论。

有没有渐变开始的事件？目前只有IE 10+ 有 transionstart 事件，W3C目前未有此标准。

云服务器 GPU云服务器花式 -transition transit Transition

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78368.html

SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

摘要：层叠即表示允许以多种方式来描述样式，一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用后，将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 评论0 收藏0
如何看源码之Ruby China搜索框动画实现

摘要：欢迎交换友链进击的程序媛微博江小湖不要脸的自恋一下我觉得我看源码的能力越来越强了，想看到搜索框动画效果很不错，想试着实现一下。例如只做了输入框的显示隐藏。但是看源码没有设置，有两个属性引起我的注意和，可以猜测这个动画的实现由实现的渐变。欢迎交换友链 Lakers Blog--进击的程序媛Github：https://github.com/younglaker微博: 江小湖Laker ...

cnsworder 2019-08-19 17:19 评论0 收藏0
如何看源码之Ruby China搜索框动画实现

摘要：欢迎交换友链进击的程序媛微博江小湖不要脸的自恋一下我觉得我看源码的能力越来越强了，想看到搜索框动画效果很不错，想试着实现一下。例如只做了输入框的显示隐藏。但是看源码没有设置，有两个属性引起我的注意和，可以猜测这个动画的实现由实现的渐变。欢迎交换友链 Lakers Blog--进击的程序媛Github：https://github.com/younglaker微博: 江小湖Laker ...

plus2047 2019-08-28 18:29 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
前端面试之CSS3新特性

摘要：和这三个特性是新增的和动画相关的特性。使用方式如下和变换类型可以有各种变换类型，即属性值定义不进行转换。设置列之间的宽度样式和颜色规则和和用户界面中，新的用户界面特性包括重设元素尺寸盒尺寸以及轮廓等。除了html5的新特性，CSS3的新特性也是面试中经常被问到的。选择器 CSS3中新添加了很多选择器，解决了很多之前需要用javascript才能解决的布局问题。 element1~...

glumes 2019-08-29 12:53 评论0 收藏0