vue.js - 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的元素上

这篇关于vue.js - Vue transition实现从屏幕右边往左进入过渡效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！