如何在显示和隐藏时添加带有输入复选框的转换

Posted 2023-03-06

【中文标题】如何在显示和隐藏时添加带有输入复选框的转换

【英文标题】：How to add Transition with Input Checkbox while Showing and Hiding

【发布时间】：2021-09-25 22:05:20

【问题描述】：

当我切换箭头按钮以隐藏/显示时，我想要内容框 stickyads 的过渡或动画。 但是当 height: auto; 它不起作用，而 if height: 90px; 它起作用。我希望我的身高在过渡工作中是自动的。

input#toggle 
    display: none;

.stickyadsContent 
  text-align: -webkit-center;
  transition: all 2s linear;
  height: auto;


input:checked~.stickyadsContent 
  height: 0px;

input:checked~.stickyadsClose:before 
  content: "\276E";
  margin-left: -5px;
  -webkit-text-stroke-width: 1px;
  transform: rotate(90deg);

.stickyadsClose:before 
  content: "\276E";
  -webkit-text-stroke-width: 1px;
  transform: rotate(270deg);


.stickyadsClose  
    width: 30px;
    height: 25px;
    display: flex;
    justify-content: center;
    border-radius: 0px 10px 0px 0px;
    position: absolute;
    left: 0px;
    cursor: pointer;
    top: -25px;
    background-color: #ffffff;
    box-shadow: -10px -8px 20px -3px rgb(9 32 76 / 6%);

 .stickyads  
   position: fixed;
   bottom: 0px;
   left: 0;
   width: 100%;
   box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1);
   background-color: #fefefe;
   z-index: 999;

<div class='stickyads'>
<input id="toggle" type="checkbox">
<label for="toggle" class="stickyadsClose"></label>
<div class="stickyadsContent">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

【问题讨论】：

您能说明一下您要转换的属性吗？ （CSS 显示不可动画）。

@AHaworth when .stickyadsContent text-align: -webkit-center;过渡：所有2s线性；高度：90px；如果我单击左侧向下箭头，则过渡有效，但是当 .stickyadsContent text-align: -webkit-center;过渡：所有2s线性；高度：自动； ，它不起作用。

我认为高度只能在固定（已知）值之间转换，不能自动转换。

@AHaworth 是的，你是对的，但是在这种情况下该怎么办如果我想离开我的身高：自动。你能回答吗？

这里有一些想法：[link]css-tricks.com/using-css-transitions-auto-dimensions 但我还没有找到完全符合你想要的方法。

【参考方案1】：

这是一个轻微的妥协，但会产生最终效果。

由于无法在 CSS 中设置高度动画，因此 sn-p 使用 translateY 将文本移出视图，因为这是可动画的。

然后我们剩下箭头的问题以及如何向下移动（未知）距离。 sn-p 使用 CSS calc 将其与文本一起移动到顶部 100% - 25px。

input#toggle 
  display: none;


.stickyadsContent 
  text-align: -webkit-center;
  transition: all 2s linear;
  transform: translateY(0);
  height: auto;


input:checked~.stickyadsContent 
  rheight: 0px;
  transform: translateY(100%);


input:checked~.stickyadsClose 
  top: calc(100% - 25px);


input:checked~.stickyadsClose:before 
  content: "\276E";
  margin-left: -5px;
  -webkit-text-stroke-width: 1px;
  transform: rotate(90deg);


.stickyadsClose:before 
  content: "\276E";
  -webkit-text-stroke-width: 1px;
  transform: rotate(270deg);


.stickyadsClose 
  width: 30px;
  height: 25px;
  display: flex;
  justify-content: center;
  border-radius: 0px 10px 0px 0px;
  position: absolute;
  left: 0px;
  cursor: pointer;
  top: -25px;
  background-color: #ffffff;
  box-shadow: -10px -8px 20px -3px rgb(9 32 76 / 6%);
  transition: top 2s linear;


.stickyads 
  position: fixed;
  bottom: 0px;
  left: 0;
  width: 100%;
  box-shadow: 0 -6px 18px 0 rgba(9, 32, 76, .1);
  background-color: #fefefe;
  z-index: 999;

<div class='stickyads'>
  <input id="toggle" type="checkbox">
  <label for="toggle" class="stickyadsClose"></label>
  <div class="stickyadsContent">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

更新：要求之一是整个元素在缩小时达到高度 0。这个 sn-p 通过使用 CSS 动画而不是内容的过渡来实现这一点。它还将阴影移动到内容元素，以便它随它上下移动。在收缩动画结束时，它会将高度设置为 0。

input#toggle 
  display: none;


input~.stickyadsContent 
  text-align: -webkit-center;
  height: auto;
  translateY(0);
  animation: grow 2s linear 1 forwards;


@keyframes grow 
  0% 
    transform: translateY(100%);
    height: auto;
    opacity: 0;
  
  1% 
    opacity: 1;
  
  100% 
    transform: translateY(0);
    height: auto;
    opacity: 1;
  


input:checked~.stickyadsContent 
  animation: shrink 2s linear 1 forwards;
  transition: all 10s;


@keyframes shrink 
  0% 
    transform: translateY(0);
    height: auto;
    opacity: 1;
  
  99% 
    transform: translateY(110%);
    height: auto;
    opacity: 1;
  
  100% 
    height: 0;
    opacity: 0;
  


input:checked~.stickyadsClose:before 
  content: "\276E";
  margin-left: -5px;
  -webkit-text-stroke-width: 1px;
  transform: rotate(90deg);


.stickyadsClose:before 
  content: "\276E";
  -webkit-text-stroke-width: 1px;
  transform: rotate(270deg);


input:checked~.stickyadsClose 
  top: calc(100% - 25px);


.stickyadsClose 
  width: 30px;
  height: 25px;
  display: flex;
  justify-content: center;
  border-radius: 0px 10px 0px 0px;
  position: absolute;
  left: 0px;
  cursor: pointer;
  top: -25px;
  background-color: #ffffff;
  box-shadow: -10px -8px 20px -3px rgb(9 32 76 / 6%);
  transition: top 2s linear;


.stickyads 
  position: fixed;
  bottom: 0px;
  left: 0;
  width: 100%;
  background-color: #fefefe;
  z-index: 999;
  /* uncomment this if you want the bottom text to show initially without animation */
  /* animation: show 2.1s 1 linear forwards; */


@keyframes show 
  0% 
    opacity: 0;
  
  99% 
    opacity: 0;
  
  100% 
    opacity: 1;
  

<div class='stickyads'>
  <input id="toggle" type="checkbox">
  <label for="toggle" class="stickyadsClose"></label>
  <div class="stickyadsContent" style="box-shadow: 0 -6px 18px 0 rgba(9, 32, 76, .1);">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

【讨论】：

感谢@AHaworth，只有盒子中的内容可以通过，盒子保持不变，有间隙。这是我不希望的。

明白 - 这就是为什么我称之为妥协！会想的更多。