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 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
CSS3系列之3D制作方法案例
Aug 14 HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
Jun 16 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
HTML5实现预览本地图片
Feb 17 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
HTML5 body设置自适应全屏
May 07 HTML / CSS
Ratchet 模态框的实现
Aug 19 HTML / CSS
AmazeUI中模态框的实现
Aug 19 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操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
Python实现提取文章摘要的方法
2015/04/21 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
python每天定时运行某程序代码
2019/08/16 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
行政总监岗位职责
2013/12/05 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
城管个人总结
2015/02/28 职场文书
立项申请报告范本
2015/05/15 职场文书
周一给客户的问候语
2015/11/10 职场文书
Python实现简单的俄罗斯方块游戏
2021/09/25 Python