VUE基础知识——过渡与动画

这篇具有很好参考价值的文章主要介绍了VUE基础知识——过渡与动画。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

官网图示

过渡&动画

过渡中的6个切换

具体操作

元素进入的样式

元素离开的样式

如何使用

示例

html代码

js代码

css代码


官网图示

过渡&动画

他是用来在我们对页面进行插入、移除或者更新DOM元素的时候,为我们添加一下动画效果的样式。

过渡中的6个切换

下面是官网对于过渡6个类的定义:

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

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

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

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

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

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

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

对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 <transition>,则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">,那么 v-enter 会替换为 my-transition-enter

v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线,在下面章节会有个示例说明。

具体操作

元素进入的样式

1、v-enter:进入的起点位置

2、v-enter-active:进入的过程中

3、v-enter-to:进入的终点位置

元素离开的样式

1、v-leave:离开的起点位置

2、v-leave-active:离开的过程中

3、v-leave-to:离开的终点位置

如何使用

使用<transition>标签保过这要过渡的元素,并且要配置其name属性

<transition name=“hello”>

        <h2 v-show="isShow">Hello!</h2>

</transition>

注意:

如果要有多个元素进行过渡的时候,那么就需要使用<transition-group>标签来实现了,并且每个元素都需要指定他的一个key值,就像我们for循环列表中指定的key一样。

动画和过渡还是有区别的, 动画的时候,只需要我们使用上面的进入和离开元素的第二个即可。

示例

html代码

<div id="app">
        <button @click="show = !show">
        点击实现过渡效果
</button>
<transition name="slide-fade">
        <p v-if="isShow">hello</p>
</transition>
</div>

js代码

new Vue({
  el: '#app',
  data: {
    isShow: true
  }
})

css代码

/* 设置持续时间和动画函数 */

/* 可以设置不同的进入和离开动画 */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}

好了,今天关于过渡&动画的内容就到这里。

欢迎大家点击下方卡片,关注《coder练习生》文章来源地址https://www.toymoban.com/news/detail-427268.html

到了这里,关于VUE基础知识——过渡与动画的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity创建人物基本动画(基础组件等相关知识和Idle的创建)

    步骤一:创建人物模型 首先,我们需要创建一个人物模型。可以使用Unity自带的模型,也可以使用第三方模型。在本文中,我们将使用Unity中自带的模型。 步骤二:创建动画控制器 在创建动画之前,我们需要先创建一个动画控制器(Animator Controller)。动画控制器是一个用于

    2024年02月15日
    浏览(50)
  • VueCLI核心知识4:动画效果、过渡效果

    【代码】 1.安装 2.导入 3.使用

    2024年02月19日
    浏览(44)
  • C#,入门教程(28)——文件夹(目录)、文件读(Read)与写(Write)的基础知识

    上一篇:   C#,入门教程(27)——应用程序(Application)的基础知识 https://blog.csdn.net/beijinghorn/article/details/125094837 C#知识比你的预期简单的多,但也远远超乎你的想象! 与 文件 相关的知识,不算多。 作为初学者,先学习 文本文件 的读写,就足够应付好几年了。 文件 自然是

    2024年01月23日
    浏览(59)
  • c#多线程—基础概念到“双色球”项目实现(附知识点目录、代码、视频)

    总结:视频中对于多线程讲的非常透彻,从线程基础概念—.net不同版本出现的线程方法—多线程常出现问题—双色球项目实践,每个知识点都有代码实操,受益匪浅。附上学习笔记和实操代码。 视频 线程:程序执行的最小单位,任何操作都是由线程完成的,使用同步时,资

    2024年02月11日
    浏览(59)
  • CSS基础-过渡动画

    CSS3新添加了过渡动画, 即使用者定义好 一个元素的 开始状态 和 结束状态 , CSS会根据变化曲线形成 补间动画 效果。 CSS3中用 transition 属性来描述动画如何运动。 定义 下面我们重点了解下, 哪个属性需要过渡 , 还有 变化曲线是什么 下面我们重点聊聊两点: 哪个属性需要

    2024年02月10日
    浏览(52)
  • Vue过渡与动画的实现效果

     使用 transition 标签配合 CSS3 过渡实现【不完整代码】: Vue 还提供了四个 class 类名,分别是进入的起点(v-enter)进入的终点(v-enter-to)离开的起点(v-leave)离开的终点(v-leave-to) 注 :进入的起点 和 离开的起点 就相当于 CSS3 动画里的 from  进入的终点 和 离开的终点 就相

    2024年02月02日
    浏览(40)
  • vue基础知识

    1、只要data里面的数据发生变化,vue模板就重新执行。 在这个例子中,vue模板中的 change() 会首先得到执行,然后调用methods中的 定时器 ,定时器发生变化,修改了 opacity ,data里面的数据发生了变化,然后就重新解析vue模板,就又重新生成了一个定时器,导致一个循环,会不

    2023年04月12日
    浏览(47)
  • vue3 基础知识

    vue3创建一个项目 1.模板语法 数据绑定最常见的形式就是使用“双大括号” 语法在HTML中插入文本: {{msg}}将被替代对应组件实例中msg属性的值。无论何时,绑定的组件实例上msg属性发 生改变,插值处内容都会更新 2.Vue 常用指令 • 指令介绍 • v-text • v-html • v-bind • v-on •

    2024年02月12日
    浏览(42)
  • vue3基础知识

    1.setup函数 在vue2中数据放在data中、方法放在method中等等。在vue3中统一放在了setup函数中。 代码如下:APP.vue 在setup中一定要有return函数,将 “所有数据(变量,函数等)” 返回在能在视图中返回 2.ref和reactive函数 reative函数和ref的功能式一样的。主要是\\\"响应式数据\\\"函数。在

    2024年02月05日
    浏览(49)
  • VUE3基础知识梳理

    官方文档:https://cn.vuejs.org/guide/essentials/event-handling.html Vue(发音为 vju:/,类似 view) 是一款用于构建用户界面的JavaScript 框架。 它基于标准 HTML、CSS 和JavaScript 构建,并提供了一套声明式的、 组件化的编程模型,帮助你高效地开发用户界面。 无论是简单还是复杂的界面,Vue 都

    2024年02月07日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包