简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - animasi peralihan automatik ketinggian peralihan
大家讲道理
大家讲道理 2017-05-16 13:21:31
0
3
764

1.Mengapa tiada kesan animasi apabila mengecut?

2.Kod

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            transition: all .6s;
        }

        .container {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 100px;
            max-height: 100px;
            width: 100px;
            margin: 5px auto;
            background: RGBA(0, 43, 54, 0.80);
            overflow: hidden;
            text-align: center;
        }

        .container:hover {
            height: auto;
            max-height: 100%;
            bottom: 0px;
        }
    </style>
</head>

<body>
    <p class="sketch">
        <p class="container">
            <!--<a id="switch" href="javascript:void(0)">开关</a>-->
        </p>
    </p>
    <!--<script>
        const classList = document.querySelector('.container').classList;
        document.querySelector('#switch').addEventListener('click', function (e) {
            if (classList.contains('expand')) {
                document.querySelector('.container').classList.remove('expand');
            } else {
                document.querySelector('.container').classList.add('expand');
            }
        });
    </script>-->
</body>

</html>

3. Demo Dalam Talian (diselesaikan)

大家讲道理
大家讲道理

光阴似箭催人老，日月如移越少年。

membalas semua(3)
左手右手慢动作
左手右手慢动作2017-05-16 13:23:31 Tingkat 3

Oleh kerana animasi peralihan yang kita boleh lihat sebenarnya adalah proses perubahan nilai height, dan anda tidak memberikan nilai yang jelas kepada height dalam atribut hover, jadi selepas mengeluarkan tetikus, penyemak imbas sebenarnya saya tidak tahu nilai mana yang hendak ditukar kepada nilai awal, jadi saya hanya kembali ke nilai awal secara langsung, jadi tiada kesan peralihan

Suka +0
Tambah Balasan
刘奇
刘奇2017-05-16 13:23:31 Tingkat 2

Sebabnya seperti yang dinyatakan di tingkat 1. Boleh setel height:100%;.

Suka +0
Tambah Balasan
伊谢尔伦
伊谢尔伦2017-05-16 13:23:31 Tingkat 1 
.container:hover {
    height: 100%; // 这个要明确值
    max-height: 100%;
    bottom: 0px;
}
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！