搜尋

首頁  >  問答  >  主體

javascript - js做過渡效果是怎麼樣做的？

小白對js不太熟悉，那麼請問，我如果js來做點擊按鈕，然後p經過5s移動到右邊500px的地方，這種效果的製作思路是啥？

是先寫好一個class，讓這些效果完全都達到了，然後用js來切換className麼？

但是在點擊事件裡面，把所有的css效果寫進去？ QUQ

滿天的星座滿天的星座2813 天前1028

全部回覆(6)我來回復

  • PHP中文网

    PHP中文网2017-06-26 10:56:58

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    <code><!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title></title>

    <style>

    p

    {

        width:100px;

        height:100px;

        background:red;

        transition:all 5s;

    }

     

    p:hover

    {

        width:300px;

    }

        #p1{

            position:relative;

            width:100px;

            height:100px;

        }

        #p2{

            position:absolute;

            width:100%;

            height:100%;

            background:#0f0;

        }

        #p2.p2{

            width:200%;

            height:200%;

        }

    </style>

    </head>

    <body>

    <input type='button' id='btn1'/>

    <p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

     

    <p></p>

        <p id='p1'>

            <p id='p2'></p>

        </p>

    <p>鼠标移动到 p 元素上，查看过渡效果。</p>

     

    </body>

        <script>

            window.onload=function(){

                var oBtn=document.getElementById("btn1"),op=document.getElementById("p2");

                oBtn.onclick=function(){

                    op.className='p2';

                }

            }

            </script>

    </html>

     

    </code>

    給你個簡單的demo看完就會了，這也只是方法中的一種，方法還有很多！

    回覆
    0
  • 伊谢尔伦

    伊谢尔伦2017-06-26 10:56:58

    你要的是這樣麼？程式碼見下方， p 5s移動到500px，可以先給p設定好transition效果，加個移動到右邊的class, js主要做的就是給元素加個class

    ps: 只是demo程式碼，沒考慮相容等等情況…

    css3

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    <code>.demo{

        border:1px solid #fff;

        width:100px;

        height:50px;

        position:relative;

        left:0;

        transition: left 2s;

    }

    .run{

     

        left:500px;

    }</code>

    1

    2

    3

    <code><p class="demo">

           

    </p></code>

    1

    2

    3

    4

    5

    <code>(function(){

        document.getElementsByClassName('demo')[0].onclick = function(){

            this.className +=' run';

        };

    })()</code>

    回覆
    0
  • 女神的闺蜜爱上我

    女神的闺蜜爱上我2017-06-26 10:56:58

    可以用css，也可以直接用js寫。 css的話就用transition寫，具體的百度，點選事件發生時為元素加入一個class，改變樣式。 js的話就用settimeout，以你說的左邊距為例，一點一點改變左邊距，到達指定值時停止即cleartimeout

    回覆
    0
  • 代言

    代言2017-06-26 10:56:58

    如樓上所說,如果是ie9以下,需要使用定時器做

    1

    2

    3

    4

    5

    6

    7

    <code>var ele = document.getElementsByClassName('demo')[0]

    ele.onclick = function(){

        var btn = this;

        setInterval(function(){

            btn.style.left = parseInt(btn.style.left) + 1 + "px"

        },1)

    }</code>

    回覆
    0
  • 習慣沉默

    習慣沉默2017-06-26 10:56:58

    一般都是用css3的transition實現過渡效果，要動畫的話用animation，使用js比較耗性能，這裡有一些參考文章

    回覆
    0
  • typecho

    typecho2017-06-26 10:56:58

    css3d屬性

    回覆
    0
  • 取消回覆