美文网首页
【转载】使用 CSS3 + JavaScript 简单实现元素的

【转载】使用 CSS3 + JavaScript 简单实现元素的

作者: VinSmokeW | 来源:发表于2019-11-27 17:22 被阅读0次

在jQuery中想实现淡入淡出的功能很简单,只需要通过 fadeIn()fadeOut() 这两个方法就能实现淡入淡出,如果是原生JS就会稍微麻烦一些,只能通过定时器来控制CSS的透明度来实现淡入淡出。但是通过JS来控制CSS的透明度有一个很大的问题,过渡不够流畅,尤其对于配置低的电脑和手机比较明显。

在CSS3中有一个 transition 属性 可以直接设置过渡时间,比起使用JS控制CSS的透明度来说,使用CSS的 transition 要更流畅。

下面简单实现元素的淡入显示和淡出隐藏:

HTML:

<button type="button" id="show">显示</button>
<button type="button" id="hide">隐藏</button>
<div></div>

上面定义了两个按钮和一个div,给div添加一些CSS,

CSS:

div{
    width: 100px;
    height: 100px;
    background: #8080FF;
    transition: 0.4s;
    opacity: 0;
    display: none;
}

上面设置的 div 宽度和高度都是100px,下面是一些属性的说明:

transition 属性

使用 transition 可设置元素的过渡时间和速度,上面的 transition 只是多个 transition 属性 的简写,完整的 transition 属性 如下:

属性 说明
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

上面的 transition: 0.4s 就是设置过渡时间为0.4秒,速度曲线默认为匀速,属性默认为全部支持的属性,注意!不是每个属性都支持动画,如果要查看支持 transition 动画的属性可以访问: CSS可动画属性列表

opacity 属性

使用 opacity 可设置元素的透明度,opacity 设置的透明度会被子元素继承,取值范围从0到1,0:完全透明,1:完全不透明,上面设置为0也就是完全透明,opacity 是支持 transition 的动画效果的。

display 属性

使用 display 可设置元素的类型,设置为 none 可隐藏元素,block 为块级元素,一般的 div 默认都是 block ,一般JS控制元素的显示和隐藏大多都是更改 display 属性。

JS:

//  显示按钮点击
document.querySelector('#show').onclick = function() {
    document.querySelector('div').style.display = 'block';  //  修改div的display

    //  延迟20毫秒
    setTimeout(function() {
        document.querySelector('div').style.opacity = 1;  //  修改div的透明度
    }, 20);
};

//  隐藏按钮点击
document.querySelector('#hide').onclick = function() {
    document.querySelector('div').style.opacity = 0;  //  修改div的透明度

    //  延迟400毫秒
    setTimeout(function() {
        document.querySelector('div').style.display = 'none';  //  修改div的display
    }, 400);
};

有的浏览器在修改 display 之后立即执行更改透明度可能不会有淡入效果,需要延迟执行更改透明度,隐藏的时候也需要先等淡出效果完成才修改 display ,否则淡出效果未完成div就会直接消失。

最终效果如下:

image

因为GIF的帧率有限,所以看上去可能会有点卡,实际效果很流畅, transition 是CSS3才引入的,所以浏览器必须支持CSS3,IE至少需要IE10。

转载自简书作者:programmerM
原文链接:https://www.jianshu.com/p/3ee2e0835967

相关文章

  • 【转载】使用 CSS3 + JavaScript 简单实现元素的

    在jQuery中想实现淡入淡出的功能很简单,只需要通过 fadeIn() 和 fadeOut() 这两个方法就能实...

  • 利用CSS3简单实现的大图滚动效果

    利用CSS3简单实现的大图滚动效果 抛弃原生JavaScript实现大图滚动,抛弃JQ,抛弃插件,今天突然想使用C...

  • transition:过度效果属性

    CSS3 过度 通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种...

  • requestAnimationFrame

    实现动画效果的方法比较多,Javascript 中可以通过定时器 setTimeout 来实现,css3 可以使用...

  • CSS3 动画

    在 CSS3 出现之前,动画都是通过 JavaScript 动态的改变元素的样式属性来完成了,这种方式虽然能够实现...

  • Css3动画.md

    Css3可以实现动画,代替原来的Flash和JavaScript方案。首先,使用 @keyframes定义一个动画...

  • 仿抖音滑屏应用开发

    滑屏应用开发 JavaScript 和 CSS3 来实现单页面应用的滑屏效果,包括上下滑屏、左右滑屏,以及局部元素...

  • CSS3关键帧动画小记

    简介 通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为...

  • 元素居中的几种方法以及各自需要注意的点

    问题:怎样实现div元素居中(垂直、水平)? 方法1:绝对定位法(transform属性) 使用css3的tran...

  • css3过渡效果

    过渡是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素...

网友评论

      本文标题:【转载】使用 CSS3 + JavaScript 简单实现元素的

      本文链接:https://www.haomeiwen.com/subject/zzxmwctx.html