jq过渡收缩动画用js实现

想法:用js实现sildToggle效果
使div收缩

总结：jq能够实现的js也可
需要对某些特定的值进行判断
难点:如何把jq的slideToggle用js的写法
效果：使用js将div实现收缩
注意:判断式不能出现错误
Array.prototype.slice.call对象不能没有length属性
总过程：
Css部分：
首先设置过渡动画
-webkit-transition：CSS属性(none|all|属性) 持续时间时间函数延迟时间
可以用来设置过渡动画

设置完成；
Js部分：
首先定义一个变量用来承载function(元素，display);

addEventListener：添加点击事件

开始时要将display定义为不等于；
没有定义将无法执行；
创建一个变量用querySelector返回所选div；

创建方法
当前所选的div或者当前div的高度=0；
定义行高等于0；
Div默认为隐藏；
将这个div转换为数组；

接下来判断节点
这里为了兼容浏览器，也为了准确找到节点。节点包含了元素节点、文本节点等，nodeType1是元素节点。
如果节点=1说明这就是那个节点执行下一步；
Window.getComputedStyle返回对象；
定义高度=
节点.网页可见区域高+parseInt（ostyle.borderTopWidth(上边框的宽度)||0)+
parseInt（ostyle.borderBottomWidth
(下边框的宽度)||0)；
这里是为整个高度加上了css的边框；
可见区域高度是body的高度；
返回高度；

Js和jq的效果是没有区别的；

jq过渡收缩动画用js实现相关推荐

右上角鼠标滑过展开收缩动画效果js代码的演示页面
http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...
framer x使用教程_如何使用Framer Motion将交互式动画和页面过渡添加到Next.js Web应用程序
framer x使用教程 The web is vast and it's full of static websites and apps. But just because those apps ...
重新想，重新看——CSS3变形，过渡与动画①
学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...
[css] 过渡和动画的区别是什么？
[css] 过渡和动画的区别是什么? 相同:都会让你的页面元素动起来区别: 过渡 transition1.需要事件触发,比如hover,focus,checked , js改, @media que ...
vue中自定义指令、组件化、生命周期、节流和防抖、获取DOM、mint-ui简介、过渡和动画
自定义指令: vue中通过directive方法自定义指令,如:自定义一个v-focus指令: <script>Vue.directive('focus', {//通过directive( ...
css动画和js动画_CSS与JS动画：哪个更快？
css动画和js动画 How is it possible that JavaScript-based animation has secretly always been as fast - or ...
c语言实现图片过渡效果飞入,用css3实现转换过渡和动画效果
为什么要用css动画替换js动画导致JavaScript效率低的两大原因:操作DOM和使用页面动画. 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在 ...
vue3过渡和动画详解
vue3过渡和动画详解一.认识动画二.Vue的transition动画三.Transition组件的原理四.class添加的时机和命名规则五.过渡css动画六.同时设置过渡和动画七.过渡 ...
css3变换、过渡与动画_带有CSS3过渡和变换的画布菜单
css3变换.过渡与动画 Now as an easy to use jQuery Plugin 现在作为易于使用的jQuery插件介绍 ( Introduction ) Off Canvas Me ...

jq过渡收缩动画用js实现

jq过渡收缩动画用js实现

jq过渡收缩动画用js实现相关推荐

最新文章

热门文章