进入和离开时的 VueJS 转换

Question

我正在尝试学习 VueJS，但目前无法通过转换解决此问题。我有两个组件，分别称为 ComponentA 和 ComponentB，如下所示：

组件A：

<template>
<div id="ComponentA">
    <h1 class="header" v-on:click="update">HEADER</h1>
    <transition
        name="custom-classes-transition"
        enter-active-class="animated fadeInDown"
        leave-active-class="animated fadeOutUp"
    ><p class="content" v-if="visible">
        Some information...
    </p></transition>
</div>
</template>

<script>
import App from "@/App";

export default {
    datas: {
        visible: false
    },
    name: "ComponentA",
    data () {
        return this.$options.datas;
    },
    methods: {
        update () {
            App.update(this.$options.name);
        }
    }
};
</script>

<style scoped>
</style>

组件B：

<template>
<div id="ComponentB">
    <h1 class="header" v-on:click="update">HEADER2</h1>
    <transition
        name="custom-classes-transition"
        enter-active-class="animated fadeInDown"
        leave-active-class="animated fadeOutUp"
    ><p class="content" v-if="visible">
        Some more information...
    </p></transition>
</div>
</template>

<script>
import App from "@/App";

export default {
    datas: {
        visible: false
    },
    name: "ComponentB",
    data () {
        return this.$options.datas;
    },
    methods: {
        update () {
            App.update(this.$options.name);
        }
    }
};
</script>

<style scoped>
</style>

这是我的 App.vue：

<template>
  <div id="app">
      <header href="https://cdn.jsdelivr.net/npm/animate.css" rel="stylesheet" type="text/css">
      <ComponentA />
      <ComponentB />
  </div>
</template>

<script>
import ComponentA from "@/components/ComponentA";
import ComponentB from "@/components/ComponentB";

export default {
    name: "App",
    components: {
        ComponentA,
        ComponentB
    },
    update (clickedComponent) {
        for (let component in this.components) {
            component = this.components[component];

            if (component.name === clickedComponent) {
                component.datas.visible = !component.datas.visible;
            } else {
                component.datas.visible = false;
            }
        }
    }
};
</script>

<style>
@import url('https://fonts.googleapis.com/css?family=Space+Mono');

:root {
    --background: #0f0f0f;
    --blueish: #546a76;
    --grayish: #7c7c7c;
    --lighterblueish: #737c81;
}

body {
    line-height: 1.7;

    background-color: var(--background);
    color: var(--grayish);

    font-family: 'Space Mono', monospace;
    font-size: 18px;
    position: relative;

    height: 100%;
    width: 60%;
    margin: auto;
    padding-top: 10vh;
}

.header {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    color: var(--blueish);
    width: max-content;
    position: sticky;
    left: 100%;
}

.header span {
    background-color: var(--lighterblueish);
    color: var(--background);
}

.content {
    padding-top: 5%;
}

.content span {
    color: var(--blueish);
}
</style>

所以问题是，当我单击 ComponentA 的标题时，它的“内容”会以流畅的动画淡入，而 ComponentB 会向下移动，但没有任何过渡。我无法向 ComponentB 的运动添加过渡。它只是立即跳下。我尝试添加键，对身体上的所有东西进行过渡，但这些都不起作用。我需要以某种方式为 ComponentB 的运动添加过渡。

编辑：JSFiddle：https://jsfiddle.net/44ctt020/2/

Answer 1

显然您正在使用animate.css 制作动画。如果您检查源，动画fadeInDown 是由关键帧使用这些属性定义的：

0% {
  opacity: 0;
  transform: translate3d(0,-100%,0);
}
100% {
  opacity: 1;
  transform: none;
}

translate3d 独立于页面上的保留空间移动元素的内容。你可以在这个codepen中看到：https://codepen.io/anon/pen/WMJjMO。

因此，当您显示组件 A 时，它会占用页面上所需的空间并立即将组件 B 向下推，然后 然后对其内容进行动画处理。

要实现您描述的效果，您必须为内容元素的高度设置动画。这将使其他组件相应地向上或向下移动。

我建议阅读此 Vue 指南并在 CSS 属性 opacity 和 height 上定义自定义过渡：https://vuejs.org/v2/guide/transitions.html