vue-transition实现加入购物车效果及其他动画效果实现

vue提供了和实现元素状态的过渡.加入过渡效果可以使元素的展示和隐藏更自然.

如果在vue中使用了标签,vue会检测是否有应用CSS过渡动画或JavaScript钩子函数,并在适当的阶段添加添加/删除类名和调用函数执行过渡动画

在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

其他的概念性文字不赘述了,大家可以去官网查看

自己写了几个小例子,效果图如下,这次的图片转换工具不行,GIF动图没弄好,大家勉强看看效果

下面贴代码

./tansitionTest.vue

文字淡入淡出效果

export default {
    name: 'myTransition',
    components: {

    },
    data() {
      return {
        show: false
      }
    },
}

 

加入购物车效果

场景:点击添加按钮,商品图片展示,并移入到购物车位置,到购物车位置时隐藏商品图片

export default {
    name: 'myTransition',
    components: {

    },
    data() {
      return {
        addShow: false
      }
    },
    methods: {
      addShopCart () {
        this.addShow = true
        // 添加类名的方法没有动画结束的时机,这里我直接写了一个定时器,时机和动画时间一致,在图片移动到购物车位置时隐藏
        setTimeout(() => {
          this.addShow = false
        }, 1000)
      }
    }
}

 

其他效果不单独放了,代码放在一起,可以直接在vue项目中新建一个component,把代码复制过去就可以使用了

 

转载于:https://www.cnblogs.com/steamed-twisted-roll/p/10951045.html