Vue JS 渐变动画高度平滑

Question

我有一个方块，点击它打开，再次点击关闭我想给这个方块应用动画，我想应用这样的动画

<template>
  <div>
    <button @click="show = !show">Click me</button>
    <div v-show="show" class="anim-block"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
};
</script>

<style scoped>
.anim-block {
  margin: 30px auto;
  width: 280px;
  height: 300px;
  background: red;
}
</style>

你也可以看看my code in codesandbox

Answer 1

您只需 CSS.

即可完成此操作

基本上只是使用您的 parent anim-block 作为掩码并添加包含您的内容的 child div。

Child

position: absolute = 这样它就不会随着 parent 动画移动

left: 50%; transform: translateX(-50%); = 使其在页面中居中（根据您当前的代码沙箱布局）

width: 280px; height: 300px; = 设置 window

的尺寸

Parent

position: relative = 将 child 保留在 parent 上，而不是页面（绝对定位的元素从最近的相对定位的 parent 开始）

overflow: hidden = 在它动画时屏蔽掉它外面的一切

width: 0; height: 0; opacity: 0; = 设置动画的开始状态

transition: all 0.3s; = 改变宽度和高度时进行过渡（也可以独立设置宽度和高度，但“all”简洁明了

Vue 组件

最后，当 show = true 时，只需在 parent 组件上添加动态 class。

<div :class="`anim-block ${show && 'open'}`">

在 .open 中使用动画的最终状态 class:

.open {
  width: 280px;
  height: 300px;
  opacity: 1;
}

最终结果

模板：

<template>
  <div>
    <button @click="show = !show">Click me</button>
    <div :class="`anim-block ${show && 'open'}`">
      <div class="content">
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque
          beatae, recusandae laborum nihil, natus placeat aut facere reiciendis
          esse cumque dicta quas possimus qui maxime asperiores sed a
          repudiandae praesentium.
        </p>
      </div>
    </div>
  </div>
</template>

CSS:

<style scoped>

.anim-block {
  position: relative;
  width: 0;
  height: 0;
  background-color: rgb(194, 209, 223);
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s;
}

.anim-block.open {
  width: 280px;
  height: 300px;
  opacity: 1;
}

.anim-block .content {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 300px;
  padding: 30px auto;
}

.anim-block .content p {
  color: rgb(34, 39, 53);
}

</style>

旁注：这是我的第一个 post，如果我的解释不清楚，请见谅。如果您有任何问题，请随时提问！

Vue JS 渐变动画高度平滑

Vue JS fading animation with smooth height

javascript

css

animation

vue.js

Child

Parent

Vue 组件

最终结果