Question

我在@media 700设置display: none时无法进行过渡效果，但我想在.content中全屏显示@media 700px，我该怎么做？

＆＃13;

body {
  background-color: #eee;

}

.header {
  height: 50px;
  width: 100%;
  border-bottom: 1px solid #999;
}

.container {
  min-width: 500px;
  max-width: 800px;
  height: auto;
  margin: 0 auto;
  background-color: #fff;
  display: table;
}

.container::after {
  content: "";
  display: block;
  clear: both;
}

.content {
  padding: 0 15px 0 0;
  display: table-cell;
  width: 485px;
}

.sidebar {
  color: white;
  width: 300px;
  border-left: 1px solid #ccc;
  box-shadow: -15px 0 10px rgba(51, 51, 51, .5);
  opacity: 1;
  transition: opacity .25s;
  background: #000;
  display: table-cell;
  height: 80vh;
}

.footer {
  background-color: #eee;
  width: 100%;
  height: 50px;
  border-top: 1px solid #999;
  position: relative;
  bottom: 0;
}

@media screen and (max-width: 800px) {

  .container {
    width: 100%;
  }
}
@media screen and (max-width: 500px) {

  .container {
    width: 500px;
  }
}
@media screen and (max-width: 700px) {
  .content {
    height: 80vh;
    padding: 0;
    display: block;
    margin: 0 auto;
  }

  .sidebar {
    opacity: 0;
    display: none;
  }
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>

  <div class="header">
    </div>

    <div class="container">
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro maxime eligendi libero minus officiis inventore debitis, earum vero perferendis ut iste corrupti culpa. Consequuntur minus natus earum voluptas quos asperiores.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro maxime eligendi libero minus officiis inventore debitis, earum vero perferendis ut iste corrupti culpa. Consequuntur minus natus earum voluptas quos asperiores.
      </div>
      <div class="sidebar">

      </div>
    </div>

    <div class="footer">
    </div>
</body>
</html>

＆＃13;

Answer 1

对于侧边栏移除不透明度并将宽度设置为过渡属性，并在介质700中将其宽度设置为零，并且添加宽度作为内容的过渡属性，并在媒体700中将其宽度设为 100％

＆＃13;

body {
  background-color: #eee;

}

.header {
  height: 50px;
  width: 100%;
  border-bottom: 1px solid #999;
}

.container {
  min-width: 500px;
  max-width: 800px;
  height: auto;
  margin: 0 auto;
  background-color: #fff;
  display: table;
}

.container::after {
  content: "";
  display: block;
  clear: both;
}

.content {
  padding: 0 15px 0 0;
  display: table-cell;
  width: 485px;
  transition: width .25s;
}

.sidebar {
  color: white;
  width: 300px;
  border-left: 1px solid #ccc;
  box-shadow: -15px 0 10px rgba(51, 51, 51, .5);
  transition: width .25s;
  background: #000;
  display: table-cell;
  height: 80vh;
}

.footer {
  background-color: #eee;
  width: 100%;
  height: 50px;
  border-top: 1px solid #999;
  position: relative;
  bottom: 0;
}

@media screen and (max-width: 800px) {

  .container {
    width: 100%;
  }
}
@media screen and (max-width: 500px) {

  .container {
    width: 500px;
  }
}
@media screen and (max-width: 700px) {
  .content {
    height: 80vh;
    padding: 0;
    display: block;
    margin: 0 auto;
    width: 100%;
   
  }

  .sidebar {
    width: 0px;
    box-shadow: none;
  }
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>

  <div class="header">
    </div>

    <div class="container">
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro maxime eligendi libero minus officiis inventore debitis, earum vero perferendis ut iste corrupti culpa. Consequuntur minus natus earum voluptas quos asperiores.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro maxime eligendi libero minus officiis inventore debitis, earum vero perferendis ut iste corrupti culpa. Consequuntur minus natus earum voluptas quos asperiores.
      </div>
      <div class="sidebar">

      </div>
    </div>

    <div class="footer">
    </div>
</body>
</html>

＆＃13;

如何正确设置过渡不透明效果

1 个答案: