Question

我试图创建一个CSS转换，当我点击一个按钮时，它会淡出并消失，而另一个元素将会占据它的位置。

然而，我几乎完成了它。将类.hide应用于按钮时，它会跳过＆＃34;跳跃＆＃34; （在完成不透明度之前不要触摸height属性）。 max-height似乎不尊重我在css中设置的css过渡属性。

Codepen：https://codepen.io/basickarl/pen/zwzNXM?editors=1111

HTML：

<div class="app-profession">
  <button id="one" class="add-profession" onclick="func()">
    <img/>
    Click me!
  </button>

  <div id="two" key="pickArea" class="pick-area">
    Here! 2
  </div>
</div>

SCSS：

button.add-profession {
    width: 500px;
    padding-top: 16px;
    padding-bottom: 16px;

    display: flex;
    justify-content: center;
    align-items: center;

    font-family: 'Verdana';
    font-size: 18px;
    font-weight: 300;
  text-decoration: none;
    color: black;
    outline-style: none;

    border: none;
    border-radius: em(0);

    opacity: 1;
    background: lightblue;

    img {
        margin-right: em(5);
        content: url('static/images/add_cross_white.png');
        height: em(30);
    }

    transition: opacity 2s ease-in-out 0s, max-height 0s linear 2s, padding 0s ease-in-out 2s;
    &.hide {
        opacity: 0;
        max-height: 0; // <--- here
    padding: 0;
    overflow: hidden;
    }

    &:hover {
        background-color: red;
        cursor: pointer;
    }
}

.pick-area {
    display: flex;
    justify-content: center;
    align-items: center;
  background-color: green;

    opacity: 0;
    max-height: 0em;
    overflow: hidden;
    width: 500px;
    padding: 16px;

  transition: all 2s linear 2s;
    &.show {
        max-height: 500px;

        opacity: 1;
    }
}

JS：

function func() {
  document.getElementById('one').classList.add('hide');
  document.getElementById('two').classList.add('show');
}

Answer 1

如果您向max-height课程添加button.add-profession，则会停止跳转

button.add-profession {
    width: 500px;
    padding-top: 16px;
    padding-bottom: 16px;
    max-height: 60px;             /*  added property  */
    ....

Updated codepen

最大高度不尊重css过渡

1 个答案: