触发transition的几种方式--转
鼠标单击 获取焦点 或元素发生任何改变,怎么说呢,目前的理解是,元素发生了什么改变,使得它跟以前不一样了。比如同样是p元素,先有一个样式。后来这个p被hover了、被focus了。或者通过另外一条途径才能得到它。比如原来是<div><p></p></div> 获取div p就可以了。但是如果有个div.addclass p的css样式。这时给div加上addclass的类也可以触发transition。当然,transition设置在最初始的p中。
现在有一个问题,如果给p加上一个类,类的css里面有对属性的更改,会触发么 ?闭着眼睛想想明天试一下(明天到了)
试了一下,过度必须要有一个动态的触发(改变)过程
div{width: 200px;height: 200px;border: 1px solid red;border-radius: 5px;padding: 20px;}p{width: 100px;height: 100px;/*border-radius: 5px;*/border: 1px solid black;-moz-transition:all 3s ease 1s; } .add{width: 50px;height: 50px; } <div><p class =‘add’></p></div> //没有任何效果,同样,设置另外一个p的样式,同样没有过度,只是覆盖罢了。 //如果改成add:hover{...} 或者js动态加入.add 就会使P有过度效果
再总结一下吧,触发分为伪类触发 比如 :hover : focus :checked :active
js触发就是toggleClass
过度应该是这样的吧,就是对同一个元素(元素获取,或者类,ID获取都可以,针对同一个元素就行),有两个不同样式(两个途径获取的)。如果一开始这两个途径就可以获取该元素(第二个直接覆盖第一个),就没有过度。
如果第二途径的实现依赖于某种改变才会获取该元素,就会有过度。
途径1获取一个元素{
//样式
}
途径2获取一个元素{
//样式
}
对于这个例子的触发可以是 div:hover p{} p:hover{} 或者动态加一个类,只要是使途径二可以获取到该元素都可以。
转载于:https://www.cnblogs.com/cnundefined/p/7117053.html
触发transition的几种方式--转相关推荐
- Qt 按键触发事件的两种方式
方式1.传统connect()函数 例如: connect(ui->findPushBtn,SIGNAL(clicked()),this,SLOT(find())); 参数1:事件UI发送者 参 ...
- ext 从头开始 extjs 控件 触发事件 的几种方式
记得以前的时候弄了一下 但是现在已经忘记得差不多了 站在巨人的肩膀上 很多朋友帮忙 给我解释 记录下来 呵 1.对象的 Listeners 里 有handler 指定js方法或函数,同时也可以直接针对 ...
- 【Android】触发按钮的三种方式
方法1 通过id绑定点击监听 实现 findViewById(R.id.home_button).setOnClickListener(new View.OnClickListener() {@Ove ...
- Workflow 4.0 中三种方式实现workflow的触发调用
1:使用WorkflowInvoker类中的InVoke静态方法-->WorkflowInvoker.Invoke(myWF); //myWF为自定义的workflow实例 [这种方式可以像一个 ...
- 已触发了一个断点 vs_实现ABAP条件断点的三种方式
本文是鼠年第3篇文章,也是汪子熙公众号第202篇原创文章. 今天是大年初三,Jerry祝大家霍去病,辛弃疾,健健康康,长命百岁. ABAP条件断点这个话题,Jerry的同事曾经问过我,虽然小但很实用. ...
- 前端实现动画的6种方式详解
前端实现动画的6种方式详解 一.总结 一句话总结:一般是css样式改变加setInterval 二.[前端动画]实现动画的6种方式 通常在前端中,实现动画的方案主要有6种: javascript直接实 ...
- 前端实现动画效果的几种方式(有实例)
现在对于前端的要求变大了很多,随着时代进步,人们的审美越来越挑剔,对于用户交互的体验成为了公司竞争的一大助力.而动画效果,可以说是最有效的提高用户体验的方式了.但是对于前端来说,实现动画的方法也有很多 ...
- 实验四:使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用
贺邦+原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 实验目的: 使用库函数 ...
- android asynctask源码分析,Android通过Handler与AsyncTask两种方式动态更新ListView(附源码)...
本文实例讲述了Android通过Handler与AsyncTask两种方式动态更新ListView的方法.分享给大家供大家参考,具体如下: 有时候我们需要修改已经生成的列表,添加或者修改数据,noti ...
最新文章
- hdoj1423 最长上升公共子序列
- JS实现——俄罗斯方块
- Django model中的 class Meta 详解
- mysql pmod项目_内置函数 - 数学函数 - 《Apache Doris 文档(201812)》 - 书栈网 · BookStack...
- IO-03. 求整数均值
- python提醒事件_监控服务器空间使用情况-crontab+python邮件提醒
- 大数据之-Hadoop完全分布式_RM启动注意事项---大数据之hadoop工作笔记0041
- OpenCL编程入门
- C# 正则表达式大全
- python报错 unexpected keyword argument ‘categories‘
- 计算机如何算幂函数,幂函数(乘方)|指数(函数)|对数(函数)|及其运算法则...
- C#chart控件如何同时显示两条曲线?
- 如何申请163 VIP邮箱?163 VIP邮箱如何注册登录?
- untiy 监听屏幕点击 物体(实现)
- Process finished with exit code 1 解决方法
- C# Dev GridView自定义底部统计单元格
- python的opencv库使用gpu加速_Python跳一跳:使用Cython加速opencv像素级访问
- PI圆周率小数点后一百万位数据
- JavaScript设计模式读书笔记(四)= 技巧型设计模式
- 色调、色相、饱和度、对比度、亮度