Question

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

ComponentA：

<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>

以componentB：

<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的标题时，它的内容＆＃34;使用漂亮的平滑动画淡入，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独立于页面上的保留空间移动元素的内容。您可以在此代码中看到：https://codepen.io/anon/pen/WMJjMO。

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

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

我建议您阅读此Vue指南并定义CSS属性不透明度和高度的自定义转换：https://vuejs.org/v2/guide/transitions.html

进入和离开VueJS过渡

1 个答案: