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动画效果抖动解决方法
Sep 03 HTML / CSS
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 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
珊瑚虫IP库浅析
2007/02/15 PHP
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
python获得一个月有多少天的方法
2015/06/04 Python
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
python mongo 向数据中的数组类型新增数据操作
2020/12/05 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
赔偿协议书范本
2014/04/15 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
经典祝酒词大全
2015/08/12 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书