纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

vue过度与动画transition 详解vue过度效果与动画transition使用示例

guoyp2126   2021-10-09 我要评论
想了解详解vue过度效果与动画transition使用示例的相关内容吗,guoyp2126在本文为您仔细讲解vue过度与动画transition的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue过度动画,transition动画,下面大家一起来学习吧。

先看一个示例

在这里插入图片描述

代码如下

<template>
  <div align="center" style="margin-top: 100px;">
    <button @click="show= !show" >测试</button>
    <transition>
      <div v-if="show">
        <p>这是一段文字</p>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  name: 'transitionTest',
  data () {
    return {
      show: true
    }
  }
}
</script>
<style scoped>
    .v-enter-active, .v-leave-active {
    transition: all .5s ;
    }
    .v-enter {
    transform: translateY(50px);
    opacity: 0;
    }
    .v-leave-active {
    transform: translateY(50px);
    opacity: .5;
    }
</style>

包裹了一个div组件,点击按钮实现动画效果。一般搭配v-if、v-show、动态组件、组件根节点来使用。

transition钩子函数

transition提供六个钩子函数,提供给我们在不同时机编写相应的动画效果。以下是此六个钩子函数执行时机

1.v-enter:进入过渡开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。

2.v-enter-active:进入过渡生效时的状态。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。

3.v-enter-to:进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。

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

5.v-leave-active:离开过渡生效时的状态。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。

6.v-leave-to:离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除

自定义过渡类名

在页面中有多个地方需要进行过渡效果,如果使用vue提供的默认那6个钩子函数,那么所有要过渡地方的过渡效果都是一样的。如果需要在不同的场合定义不同的动画效果,就需要我们自己定义专属于各个过渡效果的类名。解决办法给transition标签添加name属性,在name属性中写入自己的类名前缀。例如,那么在使用类名的时候就是这样的:.my-trans-leave、.my-trans-enter-to。如:

    <transition name="my-trans" mode="out-in">
       <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>

style写法,my-trans是“.my-trans-enter-active”的前缀

<style>
  .my-trans-enter-active,
  .my-trans-leave-active {
    transition: all .2s;
    opacity: 1;
  }
  .my-trans-enter {
    transition: all .2s;
    opacity: 0;
  }
  .my-trans-leave-to {
    transition: all .2s;
    opacity: 0;
  }  
</style>

transition-group使用

对列表进行过渡渲染时,就必须使用transition-group元素包裹。点击列表中内容,按照以下动画移除,示例如下

在这里插入图片描述

<template>
  <div class="main_css">
    <transition-group name="slide">
      <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
        {{ item.id }} --- {{ item.name }}
      </li>
    </transition-group>
  </div>
</template>
<script>
export default {
  name: 'transitionGroupTest',
  data () {
    return {
      list: [{
        id: 1,
        name: '红烧鱼'
      },
      {
        id: 2,
        name: '炒土豆'
      },
      {
        id: 3,
        name: '烧茄子'
      }
      ]
    }
  },
  methods: {
    del (i) {
      this.list.splice(i, 1)
    }
  }
}
</script>
<style scoped>
  .main_css {
    margin-left: 50px;
    margin-top: 50px;
  }
  .slide-enter-active {
    transition: all .5s linear;
  }
  .slide-leave-active {
    transition: all .1s linear;
  }
  .slide-enter {
    transform: translateX(-100%);
    opacity: 0;
  }
  .slide-leave-to {
    transform: translateX(110%);
    opacity: 0;
  }
</style>

小结

过度与动画,使用transition标签完成,同时提供6个钩子函数。全局动画在app.vue中,在router-view组件中包裹transition,如:;给transition标签添加name属性定义过渡类名,实现局部变化。

以上就是详解vue过度与动画transition使用示例的详细内容,更多关于vue过度与动画transition的资料请关注其它相关文章!


相关文章

猜您喜欢

  • vue3 非父子组件通信 vue3 非父子组件通信详解

    想了解vue3 非父子组件通信详解的相关内容吗,嘴巴嘟嘟在本文为您仔细讲解vue3 非父子组件通信的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue3组件通信,非父子组件通信,下面大家一起来学习吧。..
  • vue:内存泄露 vue:内存泄露详解

    想了解vue:内存泄露详解的相关内容吗,闲敲代码赚花花在本文为您仔细讲解vue:内存泄露的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue内存,vue内存泄露,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.ebook4download.net 【E4软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式