Html5百叶窗效果的示例代码


Posted in HTML / CSS onDecember 11, 2017

本文介绍了Html5百叶窗效果的示例代码,分享给大家,具体如下:

实现方法介绍:

1,百叶窗布局 用定位(position: absolute)覆盖在content布局之上,背景设置为透明(background-color: transparent)
2,keyframes定义淡入淡出(透明度改变)和百叶窗口效果动画。
3,启动动画是通过设置DOM的className属性的方法,animator.className = 'baiyeWindow'; 监听动画完成事件'animationend',要清除className属性。
4,在内容布局切换的事件,调用启动动画方法,两个布局都需要绑定切换事件 ng-click="switchLayout()"
5,动画执行时序图:

Html5百叶窗效果的示例代码
 

html代码:

<!--要显示百叶窗效果的布局--切换内容-->
<div id="fadeInOut" class="content"  ng-click="switchLayout()">
...
</div>
<!--百叶窗布局-->
 <ul id="baiyeWindow"  ng-click="switchLayout()">
       <li><div class="ye"></div></li>
        <li><div class="ye"></div></li>
        <li><div class="ye"></div></li>
        <li><div class="ye"></div></li>
  </ul>

css样式代码:

//谈入谈出效果
 .fade-animation{
        @-webkit-keyframes fadeInOut {
          0% {
            opacity: 1;
          }
          50% {
            opacity: 0;
          }
          100% {
            opacity: 1;
          }
        }
    @keyframes fadeInOut {
          0% {
            opacity: 1;
          }
          50% {
            opacity: 0;
          }
          100% {
            opacity: 1;
          }
        }
        animation: fadeInOut 1s ease-in;
        -webkit-animation: fadeInOut 1s ease-in;
      }
      //百叶窗效果
      .baiyeWindow{
        width: 100%;
        height: 1.68rem;
        position: absolute;
        left: 0;
        top: 1.2rem;
        li{
          height: 0.42rem;
          line-height: 40px;
          overflow: hidden;
          background-color: transparent;
          .ye{
            -webkit-animation: slideOut 1s ease-in-out;
            animation: slideOut 1s ease-in-out;
            width: 100%;
            background-color: rgba(0,0,0,.2);
            position: relative;
            top: 50%;
          }
        }
        @-webkit-keyframes slideOut {
          0% {
            padding-bottom: 0;
            top: 50%;
          }
          100% {
            padding-bottom: 40px;
            top: 0;
          }
        }
        @keyframes slideOut {
          0% {
            padding-bottom: 0;
            top: 50%;
          }
          100% {
            padding-bottom: 40px;
            top: 0;
          }
        }
      }

JS代码:

//切换布局
$scope.switchLayout = function(){
    ...
    $scope.startBaiYeWindow();
    //启动动画0.5s后,控制布局显示/隐藏
    $timeout(function () {
             if ($scope.show) {
                  $scope.show = false;
              } else {
                    ....
              }
     }, 500);
 }
//启动动画
        $scope.startBaiYeWindow = function () {
            var animator = document.getElementById('baiyeWindow');
            var animatorFadeInOut = document.getElementById('fadeInOut');
            animator.addEventListener('animationend', function () {
                animator.className = '';
                animatorFadeInOut.className = 'content';
            });
            $timeout(function () {
                animator.className = 'baiyeWindow';
                animatorFadeInOut.className = 'content fade-animation';
            }, 0);
        };

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
Nov 12 HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
html5 自定义播放器核心代码
Dec 20 HTML / CSS
HTML5中5个简单实用的API
Apr 28 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 HTML / CSS
web前端之css水平居中代码解析
May 20 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 #HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 #HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 #HTML / CSS
html5通过postMessage进行跨域通信的方法
Dec 04 #HTML / CSS
html5唤起app的方法
Nov 30 #HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 #HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 #HTML / CSS
You might like
php在window iis的莫名问题的测试方法
2013/05/14 PHP
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
php中文验证码实现方法
2015/06/18 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
python开头的coding设置方法
2019/08/08 Python
django fernet fields字段加密实践详解
2019/08/12 Python
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
大学生自我鉴定
2013/12/16 职场文书
房地产销售计划书
2014/01/10 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
锦旗标语大全
2014/06/23 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
文员岗位职责范本
2015/04/16 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
Python中Cookies导出某站用户数据的方法
2021/05/17 Python