首页 > 代码库 > transition动画初级介绍
transition动画初级介绍
Transition：（过渡转变）让瞬间改变到目标值的事情，按照我们规定的过渡方式改变到目标值。
第一点：transition适合用于哪些属性？
适合所有的元素，包括：：before和：：after伪元素。
Ps（：：before和：：after伪元素是在不改变html结构的情况下，适用于样式改变，所以在js中是对：：before和：：after进行不了事件绑定的。）
var before=document.querySelector("::before");
console.log(before);
打印出来是个null,显然我们不能对这个::before伪元素进行事件注册.
第二点:transition过渡效果有什么触发?
一般来说,transition动画可以由伪元素触发,例如:foucs,hover,也可以由js中的事件触发.
下面写一个常见的鼠标移上去开关门的效果.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 234px; 9 height: 300px;10 background:url("images/eji.jpg")no-repeat center/cover ;11 margin: 0 auto;12 margin-top: 100px;13 position: relative;14 overflow: hidden;15 16 }17 div::before{18 content: "快来买";19 width: 100%;20 height: 50px;21 position: absolute;22 bottom: -50px;23 /*最好放在这里哟,如果你想鼠标离开的时候有过渡效果的话*/24 transition: all 1s;25 background-color: gray;26 text-align: center;27 line-height: 50px;28 opacity: 0.5;29 }30 div::after{31 content: "仅限今日";32 width: 100%;33 height: 250px;34 position: absolute;35 top: -250px;36 background-color: gray;37 transition: all 1s;38 39 text-align: center;40 line-height: 50px;42 opacity: 0.5;43 }44 div:hover::before{45 bottom: 0px;46 /*如果transition放在这里,那么在鼠标移开div的时候,就没有过渡效果了,所以最好放在需要过渡的元素上面*/47 /*transition: all 1s;*/48 49 }50 div:hover::after{51 top: 0px;52 }53 </style>54 </head>55 <body>56 <div></div>57 </body>58 </html>
下面是由js的点击事件触发的transition动画.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body,html{ height: 100%; } body{ background-color: skyblue; } div{ width: 101px; height: 190px; background:url("images/rocket.png") ; position:relative ; transform:rotateZ(0deg)scale(0,0); left: 0px; transition: transform 3s,left 2s 3s; } .animation1{ transform: rotateZ(90deg)scale(1,1); left: 900px; } .animation2{ transform: rotatez(-90deg); left: 0px; } </style></head><body><input type="button" id="takeOff" value="起飞"><input type="button" id="goBack" value="返回"><div></div><script> var takeOff=document.querySelector("#takeOff"); var goBack=document.querySelector("#goBack"); var rocket=document.querySelector("div"); takeOff.onclick=function(){ rocket.classList.remove("animation1"); rocket.classList.add("animation1");// rocket.classList.toggle("animation1"); } goBack.onclick=function(){ rocket.classList.remove("animation2"); rocket.classList.add("animation2"); }</script></body></html>
transition动画初级介绍
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。