Question

我正在使用网站，我通过使用一些简单的css和js使div扩展并隐藏文本。任何人都可以教我如何使文本与过渡一起扩展？仅供参考我对网页设计的了解有限，如果我的代码很乱，很抱歉。

    <html>
    <style>

    body, html {
    height: 100%;
    background-color: black;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	margin: 0;
    }

    p.italic { 
	font-size: 150%;
	line-height: 50px;
	font-style:italic;
    }

    p { 
	font-size: 100%;
	line-height: 25px;
    }

    h1 { 
    font-size: 400%;
    }

    .container1 {
    height: 80px;
    background-color:white;
    margin-left:50px;
    margin-right:50px;
    transition: all 2s ease;
    }

    .container1expanded {
    height: 280px;
    transition: all 2s ease;
    line-height: normal;
    }

    .container1 h1 { 
    font-size: 400%;
    line-height: 40px;
    }

    #container1p {
    display: none;
    transition: all 2s ease;
    }
    <body>
    </style>
    <script type="text/javascript">
    function expand(){
        document.getElementById("container1").style.height= "280px";
        document.getElementById("container1p").style.display= "block";
    }

    </script>
    <div class="container1" id="container1">
    <h1 onclick="expand()">Lorem ipsum</h1>
    <div id="container1p">
    <p class="italic">Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur                                             venenatis eget felis at tempor. Phasellus bibendum auctor massa condimentum venenatis. 
    </p>
    </div>
    </div>
    </body>
    <html>

Answer 1

您应该做的就是在转换元素的内部之前和之后包含font-size。

.container1 {
height: 80px;
background-color:white;
margin-left:50px;
margin-right:50px;
font-size:18px;
transition: all 2s ease;
}

.container1expanded {
height: 280px;
font-size:28px;
transition: all 2s ease;
line-height: normal;
}

如果您尝试同时转换文本上的两个属性，这是错误的，但如果仅转换其字体大小应该可以正常工作：

Answer 2

如果您将内容默认为transform:scale(0,0)并设置transition动画的内容，则可以使用与当前动画容器相同的方式设置内容动画。

我建议你不要设置个人风格。根据需要添加和删除类更容易。

另外（仅供参考），您的HTML无效，因为您style或head以外的body并且您根本没有head。

有关详细信息，请参阅JavaScript和CSS注释：

// Get DOM references
var h1 = document.querySelector(".container1 > h1");
var container1 = document.getElementById("container1");
var container1p = document.getElementById("container1p");
var pars = document.querySelectorAll("#container1p p");

// Set event handlers in JavaScript, not in HTML
h1.addEventListener("click", expand);

function expand(){
    // Expand the container and show it by adding/removing classes
    container1.classList.add("container1expanded");
    container1p.classList.remove("hidden");
    
    // We need a short delay to let the UI update to show the container before
    // we animate the container's contents
    setTimeout(function(){
      // Loop over nested paragraphs
      for(var i = 0; i < pars.length; i++){
        // Scale the contents back to 100% from their default of 0
        pars[i].style.transform = "scale(1,1)";
      }
    }, 15);
}

body, html {
  height: 100%;
  background-color: black;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  margin: 0;
}

p.italic { 
  font-size: 150%;
  line-height: 50px;
  font-style:italic;
}

p { 
  font-size: 100%;
  line-height: 25px;
}

h1 { 
  font-size: 400%;
}

.container1 {
  height: 80px;
  background-color:white;
  margin-left:50px;
  margin-right:50px;
  transition: all 2s ease;
}

.container1 h1 { 
  font-size: 400%;
  line-height: 40px;
}

/* content1p uses this class by default*/
.hidden {  display:none; }

/* This class is added when the container needs to be expanded*/
.container1expanded {
  height: 280px;
  line-height: normal;
}

/* This sets up animations on the contents */
#container1p {
  transition: all 2s ease;
}

/* This initializes the contents to a size of 0 and sets up the animation */
#container1p p {
  transform:scale(0,0);
  transition: all 2s ease;
}

<div class="container1" id="container1">
  <h1>Lorem ipsum</h1>
  <div id="container1p" class="hidden">
    <p class="italic">Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur                                        venenatis eget felis at tempor. Phasellus bibendum auctor massa condimentum venenatis. 
    </p>
  </div>
</div>

Answer 3

如果您将overflow: hidden添加到展开元素，则文本不会自动弹出页面 - 默认情况下，文本将在展开元素中隐藏/剪切，并且当它展开时，随着高度的增加，它会显示文字。我还调整了扩展元素的基本高度。

＆＃13;

    <html>
    <style>

    body, html {
    height: 100%;
    background-color: black;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	margin: 0;
    }

    p.italic { 
	font-size: 150%;
	line-height: 50px;
	font-style:italic;
    }

    p { 
	font-size: 100%;
	line-height: 25px;
    }

    h1 { 
    font-size: 400%;
    }

    .container1 {
    background-color:white;
    margin-left:50px;
    margin-right:50px;
    transition: all 2s ease;
    overflow: hidden;
    height: 100px;
    }

    .container1expanded {
    height: 280px;
    transition: all 2s ease;
    line-height: normal;
    }

    .container1 h1 { 
    font-size: 400%;
    line-height: 40px;
    }

    #container1p {
    display: none;
    transition: all 2s ease;
    }
    <body>
    </style>
    <script type="text/javascript">
    function expand(){
        document.getElementById("container1").style.height= "280px";
        document.getElementById("container1p").style.display= "block";
    }

    </script>
    <div class="container1" id="container1">
    <h1 onclick="expand()">Lorem ipsum</h1>
    <div id="container1p">
    <p class="italic">Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur                                             venenatis eget felis at tempor. Phasellus bibendum auctor massa condimentum venenatis. 
    </p>
    </div>
    </div>
    </body>
    <html>

＆＃13;

Answer 4

你可以尝试这样的事情，别忘了包括Jquery codepen simple animation

<div>
  <h1>Hello World</h1>
  <p>Hello world will the first animation that Lorem will make</p>

</div>
div {
  margin:0 auto;
  text-align: center;
  width:290px;
  height:80px;
  background-color:blue;
  overflow:hidden;
  transition: .5s ease;
}

    p {
      position: absolute;
      bottom: -20%;
      opacity:0;
       transition: .5s .5s ease;
    }

$('div').click(function(){
  $('div').css({width:'400px'});
  $('div').css({height:'400px'});
  $('p').css({opacity:'1'});
   $('p').css({bottom:'80%'});
});

使用包含文本的动画展开div容器

4 个答案: