Vue transition实现从屏幕右边往左进入过渡效果

想要实现这个div.good从右往左出现到屏幕的过渡效果,实现不了,我觉得应该是css的问题,不知道怎么修改。
代码如下:<script>标签内的js代码可忽略。

<template>
  <div class="food" v-show="showFlag">
    <transition name="move">
      <div class="food-content">
        <div class="image-header">
          <img src="food.image">
        </div>
      </div>
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      food: {
        type: Object
      }
    },
    data () {
      return {
        showFlag: false
      };
    },
    methods: {
      show () {
        this.showFlag = true;
      }
    }
  };
</script>

<style>
  .food {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 48px;
    z-index: 30;
    width: 100%;
    background: #fff;
  }
  .food .move-enter-active, .food .move-leave-active {
    transition: all 0.5s linear;
    transform: translate3d(0, 0, 0);
  }
  .food .move-enter, .food .move-leave {
    transform: translate3d(100%, 0, 0);
  }
</style>

回答:

<transition name="move" >
  <div class="food-content" v-show="showFlag">
    <div class="image-header">
      <img src="http://static.jsbin.com/images/dave.min.svg">
    </div>
  </div>
</transition>

v-show 要放在需要transition的元素上

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注