html - 使用 :target 的过渡-6ren

html - 使用 :target 的过渡

转载作者：行者123 更新时间：2023-11-28 03:28:53

有一个关于使用 :target-selector 转换的问题。尝试通过 google 和互联网搜索让转换与我的代码一起工作的方法，但我只能使用动画(不允许我使用)。

我的 HTML 代码:

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BluShop</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">
    <header id="header">
        <h1>BluShop</h1>
    </header>

    <section id="leftContent">
        <div id="pacificrimContent">
            <h2>Pacific Rim</h2>
            <img src="../bilder/pacificRim.jpg">
            <p>blahblah</p>
        </div>
        <div id="startrekContent">
            <h2>Star Trek</h2>
            <img src="../bilder/starTrek.jpg">
            <p>blahblah</p>
        </div>
        <div id="worldwarzContent">
            <h2>World War Z</h2>
            <img src="../bilder/worldWarZ.jpg">
            <p>blahblah </p>
        </div>
    </section>
    <aside id="rightContent">
        <div id="pacificrimPoster">
            <a href="#pacificrimContent"><img src="../bilder/pacificRim.jpg"></a>
        </div>
        <div id="startrekPoster">
            <a href="#startrekContent"><img src="../bilder/starTrek.jpg"></a>
        </div>
        <div id="worldwarzPoster">
            <a href="#worldwarzContent"><img src="../bilder/worldWarZ.jpg"></a>
        </div>
    </aside>

    <footer id="footer">
    </footer>
</div>  
</body>
</html>

和 CSS 代码:

    @charset "utf-8";
/* CSS Document */

body{
    margin: 0;
    }

#container{
    width: 960px;
    height: 600px;
    margin: auto;
    background-color: rgb(78, 80, 85);
    border: solid 1px rgb(213, 214, 215);
    }

#header{
    height: 60px;
    background-color: rgb(66, 69, 74);
    margin-bottom: 10px;
    }   

#header h1{
    float: left;
    margin: 0px 10px 0px 10px;
    color: rgb(14, 177, 238);   
    }

#leftContent{
    float: left;
    position: relative;
    margin: 0px 10px 10px 10px;;
    height: 460px;
    width: 780px;
    background-color: rgb(230, 231, 232);
    }

#leftContent h2{
    font-size: 20px;
    margin: 10px 0px 0px 10px;
    }

#leftContent img{
    float: left;
    margin: 0px 20px 10px 10px;
    width: 310px;
    height: 420px;
    }

#leftContent p{
    margin: -4px 20px 10px 0px;
    }           

#pacificrimContent, #startrekContent, #worldwarzContent{
    display: none;
    }   

#rightContent{
    float: right;
    width: 140px;
    height: 460px;
    margin: 0px 10px 10px 10px;
    background-color: rgb(230, 231, 232);
    }   

#rightContent img{
    display: block;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px    
    }

#pacificrimContent:target{
    display:block;
    position: absolute;
    }   

#startrekContent:target{
    display:block;
    position: absolute;
    }

#worldwarzContent:target{
    display:block;
    position: absolute;
    }   

#footer{
    height: 60px;
    margin: 0;  
    background-color: rgb(16, 163, 210);
    clear: both;
    }

使用 :target 时要显示的图像首先必须是不可见的，因此我一直在使用 display: none，在 #pacificrimContent 等下。

所以我要注意的是，当我触发 #pacificrimContent 出现时，我想要一个过渡效果，如 f.ex。淡出效果。我尝试了不同的方式:放置过渡:所有 2s 淡入；在显示屏下:无，但我无法解决这个问题。

如果有人能在我去她的路上帮助我就好了。如果有人向我解释它，我也会很高兴，这样我就可以了解我实际在做什么，而不是使用 copy/pasye。

谢谢!

最佳答案

display 属性的使用(即，将 display 从 none 更改为 block，反之亦然) 总是导致转换中断。

作为替代选项，您可以将 block 的高度 初始设置为0，然后在定位时将其转换为100%。下面是一个示例:

#pacificrimContent, #startrekContent, #worldwarzContent {
    height: 0px;
    overflow: hidden;
    transition: height 1s ease-in-out;
}
#pacificrimContent:target, #startrekContent:target, #worldwarzContent:target {
    height: 100%;
    position: absolute;
}

body {
  margin: 0;
}
#container {
  width: 960px;
  height: 600px;
  margin: auto;
  background-color: rgb(78, 80, 85);
  border: solid 1px rgb(213, 214, 215);
}
#header {
  height: 60px;
  background-color: rgb(66, 69, 74);
  margin-bottom: 10px;
}
#header h1 {
  float: left;
  margin: 0px 10px 0px 10px;
  color: rgb(14, 177, 238);
}
#leftContent {
  float: left;
  position: relative;
  margin: 0px 10px 10px 10px;
  height: 460px;
  width: 780px;
  background-color: rgb(230, 231, 232);
}
#leftContent h2 {
  font-size: 20px;
  margin: 10px 0px 0px 10px;
}
#leftContent img {
  float: left;
  margin: 0px 20px 10px 10px;
  width: 310px;
  height: 420px;
}
#leftContent p {
  margin: -4px 20px 10px 0px;
}
#pacificrimContent,
#startrekContent,
#worldwarzContent {
  height: 0px;
  overflow: hidden;
  -webkit-transition: height 1s ease-in-out;
  -moz-transition: height 1s ease-in-out;
  transition: height 1s ease-in-out;
}
#rightContent {
  float: right;
  width: 140px;
  height: 460px;
  margin: 0px 10px 10px 10px;
  background-color: rgb(230, 231, 232);
}
#rightContent img {
  display: block;
  width: 100px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px
}
#pacificrimContent:target,
#startrekContent:target,
#worldwarzContent:target {
  height: 100%;
  position: absolute;
}
#footer {
  height: 60px;
  margin: 0;
  background-color: rgb(16, 163, 210);
  clear: both;
}

<div id="container">
  <header id="header">
    <h1>BluShop</h1>

  </header>
  <section id="leftContent">
    <div id="pacificrimContent">
      <h2>Pacific Rim</h2>

      <img src="../bilder/pacificRim.jpg">
      <p>blahblah</p>
    </div>
    <div id="startrekContent">
      <h2>Star Trek</h2>

      <img src="../bilder/starTrek.jpg">
      <p>blahblah</p>
    </div>
    <div id="worldwarzContent">
      <h2>World War Z</h2>

      <img src="../bilder/worldWarZ.jpg">
      <p>blahblah</p>
    </div>
  </section>
  <aside id="rightContent">
    <div id="pacificrimPoster">
      <a href="#pacificrimContent">
        <img src="../bilder/pacificRim.jpg">
      </a>

    </div>
    <div id="startrekPoster">
      <a href="#startrekContent">
        <img src="../bilder/starTrek.jpg">
      </a>

    </div>
    <div id="worldwarzPoster">
      <a href="#worldwarzContent">
        <img src="../bilder/worldWarZ.jpg">
      </a>

    </div>
  </aside>
  <footer id="footer"></footer>
</div>

使用以下链接获取可动画/可转换属性的列表:

关于html - 使用 :target 的过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19290689/

首页

博学

6Ren·AI

商城

html - 使用 :target 的过渡