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参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
css中:last-child不生效的解决方法
Aug 05 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
php inc文件使用的风险和注意事项
2013/11/12 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
JavaScript 继承的实现
2009/07/09 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
vue弹窗插件实战代码
2018/09/08 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
Born鞋子官网:Born Shoes
2017/04/06 全球购物
DJI美国:消费类无人机领域的领导者
2018/04/27 全球购物
医学院四年学习生活的自我评价
2013/11/06 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
节电标语大全
2014/06/23 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书