元素显示和隐藏的过渡效果

本文适用场景:元素隐藏时占有原来位置

需求描述

有 A、B 两个元素,鼠标移进 A 元素,显示出 B 元素,鼠标移出 A 元素,隐藏 B 元素,并带有过渡效果【B 元素隐藏时需要占有原来的位置】

<head>
    <style>
        .main {
            height: 30px;
            cursor: pointer;
            background-color: aquamarine;
            text-align: center;
        }

        .show {
            display: block;
            width: 300px;
            height: 100px;
            background-color: pink;
            transition: all .5s;
        }

        .main:hover .show {
            display: none;
        }
    style>
head>

<body>
<div class="main">
    this
    <div class="show">div>
div>
body>

进一步研究

上面的代码基本实现功能,但是你会发现,过渡效果并没有起作用

这是因为 .show 元素本身是一个通过 display:none; 的方式隐藏起来的元素,此时给他加上过渡的话,过渡效果会不起作用

既然此时该元素不可以添加过渡,那么我们需要换一种方式使元素不可见

解决方法如下

  • 隐藏:opacity: 0;
  • 显示:opacity: 1;
  • 过渡:transition: all .5s;
<head>
    <style>
        .main {
            height: 30px;
            cursor: pointer;
            background-color: aquamarine;
            text-align: center;
        }

        .show {
            opacity: 1;
            width: 300px;
            height: 100px;
            background-color: pink;
            transition: all .5s;
        }

        .main:hover .show {
            opacity: 0;
        }
    style>
head>

<body>
<div class="main">
    this
    <div class="show">div>
div>
body>

到此,结束!!!

你可能感兴趣的:(CSS,css)