javascript - 进入和离开时的 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 的运动添加过渡。它立即跳下来。我尝试添加键，过渡到 body 上的所有内容，但这些都不起作用。我需要以某种方式向 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 独立于页面上的保留空间移动元素的内容。您可以在此代码笔中看到:https://codepen.io/anon/pen/WMJjMO .

因此，一旦您显示组件 A，它就会占用页面上所需的空间并立即将组件 B 向下推，然后为其内容设置动画。

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

我建议阅读此 Vue 指南并在 CSS 属性不透明度和高度上定义自定义过渡:https://v2.vuejs.org/v2/guide/transitions.html