Linux制作百叶窗代码,Html5百叶窗效果的示例代码

2023-10-13 12:40

本文主要是介绍Linux制作百叶窗代码,Html5百叶窗效果的示例代码,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

实现方法介绍:

1,百叶窗布局 用定位(position: absolute)覆盖在content布局之上,背景设置为透明(background-color: transparent)

2,keyframes定义淡入淡出(透明度改变)和百叶窗口效果动画。

3,启动动画是通过设置DOM的className属性的方法,animator.className = 'baiyeWindow'; 监听动画完成事件'animationend',要清除className属性。

4,在内容布局切换的事件,调用启动动画方法,两个布局都需要绑定切换事件 ng-click="switchLayout()"

5,动画执行时序图:

3e8f635ca3c13dd4a16c7db69d41da6c.png

html代码:

...

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);

};

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

这篇关于Linux制作百叶窗代码,Html5百叶窗效果的示例代码的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/203290

相关文章

pandas中位数填充空值的实现示例

《pandas中位数填充空值的实现示例》中位数填充是一种简单而有效的方法,用于填充数据集中缺失的值,本文就来介绍一下pandas中位数填充空值的实现,具有一定的参考价值,感兴趣的可以了解一下... 目录什么是中位数填充?为什么选择中位数填充?示例数据结果分析完整代码总结在数据分析和机器学习过程中,处理缺失数

Pandas统计每行数据中的空值的方法示例

《Pandas统计每行数据中的空值的方法示例》处理缺失数据(NaN值)是一个非常常见的问题,本文主要介绍了Pandas统计每行数据中的空值的方法示例,具有一定的参考价值,感兴趣的可以了解一下... 目录什么是空值?为什么要统计空值?准备工作创建示例数据统计每行空值数量进一步分析www.chinasem.cn处

利用Python调试串口的示例代码

《利用Python调试串口的示例代码》在嵌入式开发、物联网设备调试过程中,串口通信是最基础的调试手段本文将带你用Python+ttkbootstrap打造一款高颜值、多功能的串口调试助手,需要的可以了... 目录概述:为什么需要专业的串口调试工具项目架构设计1.1 技术栈选型1.2 关键类说明1.3 线程模

Python Transformers库(NLP处理库)案例代码讲解

《PythonTransformers库(NLP处理库)案例代码讲解》本文介绍transformers库的全面讲解,包含基础知识、高级用法、案例代码及学习路径,内容经过组织,适合不同阶段的学习者,对... 目录一、基础知识1. Transformers 库简介2. 安装与环境配置3. 快速上手示例二、核心模

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl

Mysql用户授权(GRANT)语法及示例解读

《Mysql用户授权(GRANT)语法及示例解读》:本文主要介绍Mysql用户授权(GRANT)语法及示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql用户授权(GRANT)语法授予用户权限语法GRANT语句中的<权限类型>的使用WITH GRANT

Java中Scanner的用法示例小结

《Java中Scanner的用法示例小结》有时候我们在编写代码的时候可能会使用输入和输出,那Java也有自己的输入和输出,今天我们来探究一下,对JavaScanner用法相关知识感兴趣的朋友一起看看吧... 目录前言一 输出二 输入Scanner的使用多组输入三 综合练习:猜数字游戏猜数字前言有时候我们在

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M