我知道这可能听起来很奇怪,但当标题更改大小时,我如何添加过渡效果?问题在于它没有与高度相关的CSS值,它只是具有顶部和底部填充的文本,并且随着文本的更改,高度也会更改。那么我该如何实现类似于过渡的效果呢?让我通过代码演示我的意思:
$(document).ready(function() {
$('.header').click(function() {
if ($('.header').html() == 'Hello World (Click this header)') {
$('.header').html('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dapibus. Nullam eget nisl. Nunc auctor. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Praesent vitae arcu tempor neque lacinia pretium. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ac dolor sit amet purus malesuada congue. Pellentesque arcu.');
} else {
$('.header').html('Hello World (Click this header)');
}
});
});
.header {
color: #fff;
font-family: helvetica;
position: fixed;
right: 0px;
left: 0px;
top: 0px;
padding: 30px 15px;
background-color: #4d5366;
cursor: pointer;
transition: all 0.3s ease-in-out;
user-select: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="header">Hello World (Click this header)</nav>