简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Bagaimana untuk menggunakan js untuk mencipta kesan peralihan?
滿天的星座
滿天的星座 2017-06-26 10:54:58
0
6
901

Newbie tidak begitu biasa dengan js, jadi sila beritahu saya, jika saya menggunakan js untuk mengklik butang, dan kemudian p bergerak ke kedudukan 500px di sebelah kanan selepas 5 saat, apakah idea untuk membuat ini kesan?

Perlukah kita menulis kelas dahulu untuk mencapai semua kesan ini, dan kemudian menggunakan js untuk menukar nama kelas?

Tetapi dalam acara klik, tulis semua kesan css? QUQ

滿天的星座
滿天的星座

membalas semua(6)
Ty80
Ty802017-06-26 10:56:58 Tingkat 6 
<!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>

Saya akan memberikan anda demo yang mudah dan anda akan mengetahuinya Ini hanya salah satu kaedah, terdapat banyak lagi!

Suka +0
Tambah Balasan
伊谢尔伦
伊谢尔伦2017-06-26 10:56:58 Tingkat 5

Adakah ini yang anda mahukan? Lihat kod di bawah. p bergerak ke 500px dalam 5s Anda boleh menetapkan kesan peralihan untuk p terlebih dahulu dan menambah kelas yang bergerak ke kanan ialah menambahkan kelas pada elemen

ps: Ini hanyalah kod demo, tidak mengambil kira keserasian, dll...

css3

.demo{
    border:1px solid #fff;
    width:100px;
    height:50px;
    position:relative;
    left:0;
    transition: left 2s;
}
.run{

    left:500px;
}
<p class="demo">
      
</p>
(function(){
    document.getElementsByClassName('demo')[0].onclick = function(){
        this.className +=' run';
    };
})()
Suka +0
Tambah Balasan
女神的闺蜜爱上我
女神的闺蜜爱上我2017-06-26 10:56:58 Tingkat 4

Anda boleh menggunakan css atau menulis terus dalam js. Untuk css, gunakan peralihan untuk menulisnya Untuk Baidu secara khusus, apabila peristiwa klik berlaku, tambahkan kelas pada elemen dan tukar gaya. Untuk js, gunakan settimeout, ambil margin kiri yang anda nyatakan sebagai contoh, tukar margin kiri sedikit demi sedikit dan berhenti apabila ia mencapai nilai yang ditentukan, iaitu cleartimeout

Suka +0
Tambah Balasan
代言
代言2017-06-26 10:56:58 Tingkat 3

Seperti yang dinyatakan di atas, jika ia adalah ie9 atau ke bawah, anda perlu menggunakan pemasa

var ele = document.getElementsByClassName('demo')[0]
ele.onclick = function(){
    var btn = this;
    setInterval(function(){
        btn.style.left = parseInt(btn.style.left) + 1 + "px"
    },1)
}
Suka +0
Tambah Balasan
習慣沉默
習慣沉默2017-06-26 10:56:58 Tingkat 2

Biasanya css3 digunakantransition实现过渡效果，要动画的话用animation Menggunakan js lebih intensif prestasi Berikut adalah beberapa artikel rujukan

Suka +0
Tambah Balasan
typecho
typecho2017-06-26 10:56:58 Tingkat 1

css3d properties

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！