又被transform的坐标系坑了一下

在css变换中,坐标系和数学上传统的的坐标系在方向上是不一致的,之前写过相关的总结 理解CSS transform 2d变换,今天写vue过渡动画时又栽坑了

<template>
    <div id="app">
        <img
            alt="Vue logo"
            src="./assets/logo.png"
        >
        <button @click="show = !show">
            Toggle render
        </button>
        <transition name="slide-fade">
            <p
                v-if="show"
                style="background-color: red"
            >hello</p>
        </transition>
    </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      show: false,
    };
  },
  methods: {
  },
  mounted() {
  },
};
</script>

<style>
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}

.slide-fade-enter-active,
.slide-fade-leave-active {
    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}


.slide-fade-enter,
.slide-fade-leave-to { 
    transform: translateY(100%); /* 这里值为100%时是隐藏状态,为默认值0时是显示状态*/
}
</style>

posted @ 2019-08-13 13:58:26 浏览(27) 笔记

avatar