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>

 

 

 

 

 

      

posted @ 2016-09-04 00:03  爱编程的小妹儿  阅读(286)  评论(0)  编辑  收藏  举报