vue.js知识点-transition的钩子函数应用（实例展示）

最新推荐文章于 2024-04-15 16:31:02 发布
最新推荐文章于 2024-04-15 16:31:02 发布
阅读量1.7k 收藏 3
点赞数 1
分类专栏： # vue.js 文章标签： vue.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Scott_zt/article/details/104816548
版权
本小结通过transition的钩子函数实现小球半场动画

头条-静敏的编程秘诀-vue教程合集

知识点1：入场、出厂方法

  • beforeEnter
    表示动画入场之前，此时，动画尚未开始，可以在beforeEnter中设置元素开始动画之前的起始样式

  • enter
    表示动画开始之后的样式，这里可是设置小球完成动画之后的，结束状态
    enter(el,done)
    el:动画钩子函数的第一个参数：el，标识，要执行动画的DOM原始，是原生的JS DOM对象
    done:实现动画立刻消失,这里的done就是afterEnter函数的引用
    .offsetWidth:这句话没有实际作用，但不写，出不来动画效果,有点坑

  • afterEnter
    动画完成之后会调用afterEnter

知识点2：v-on绑定监听事件
可以简写为@
示例展示
<body>
    <div id="app">
        <input type="button" value="加入购物车" @click="flag=!flag">

        <!-- //transition 动画包裹元素 -->
        <!-- v-on:  可以简写为 @ -->
        <!-- 借助transition的钩子函数实现半场动画 -->
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show="flag"></div>
        </transition>

    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false,
            },
            
            methods: {
                //动画钩子函数的第一个参数：el，标识，要执行动画的DOM原始，是原生的JS DOM对象
                //el是通过 document.getElementByID('') 的方式实现的
                beforeEnter(el) {
                    //表示动画入场之前，此时，动画尚未开始，可以在beforeEnter中设置元素开始动画之前的起始样式
                    el.style.transforem="translate(0,0)"

                },
                enter(el,done) {
                    // 下面这句话没有实际作用，但不写，出不来动画效果，是个坑
                    // 其实说明el.offsetWidth会强制刷新![在这里插入图片描述](https://img-blog.csdnimg.cn/20200312130424377.gif)
                    el.offsetWidth
                    //表示动画开始之后的样式，这里可是设置小球完成动画之后的，结束状态
                    el.style.transform="translate(150px,350px)"
                    el.style.transition=" all 1s ease"
                    // 实现动画立刻消失
                    // 这里的done就是afterEnter函数的引用
                    done()

                },
                afterEnter(el) {
                    // 动画完成之后会调用afterEnter
                    this.flag=!this.flag
                }
            },

        });
    </script>
</body>

<style>
        .ball {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;

        }
    </style>

效果
在这里插入图片描述

挺哥的踩坑之旅
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE之过渡transition+动画+动画钩子
weixin_45492145的博客
10-31 3256
ue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具： 在 CSS 过渡和动画中自动应用 class–基础动画 可以配合使用第三方 CSS 动画库，如 Animate.css–CSS动画 在过渡动画钩子函数中使用 JavaScript 直接操作 DOM—JS动画 可以配合使用第三方 JavaScript 动画库，如 Velocity.js—JS动画库 Vue 提供了...
vue2 transition钩子函数简介
chibipu1176的博客
01-23 773
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" ...
vue内置组件Transition的详解
最新发布
qq_44741577的博客
04-15 2248
会在一个元素或组件进入和离开 DOM 时应用动画。会在一个 v-for 列表中的元素或组件被插入，移动，或移除时应用动画。简单地说，就是当元素发生变化，比如消失、显示时，添加动画让它更自然过渡。它是vue内置组件，不需要引入注册就可以直接使用。通过name可以自定义的过渡类名。注意：里面只能有一个根组件，但使用v-if、v-else、v-else-if切换显示是可以的。如果想对列表中的元素设置过渡，可以使用。
Vue的transition的js的钩子函数
weixin_30576859的博客
04-16 382
transition这个标签上除了绑定name还可以绑定before-enter，enter，before-leave，leave <transition name="fade" @before-enter="beact" @enter="eact" @before-leave="bl...
Vue ＜transition＞过渡中的JS钩子
zbailing的博客
02-21 361
<!-- Vue <transition>过渡中的JS钩子--> <template> <div class="page"> <button @click="show = !show">click</button> <transition name="ani" v-on:before-enter="beforeEnter"> <div class="box" v-if="show"&.
Vue ＜transition＞ 通过事件钩子实现动态过渡案例2
zbailing的博客
03-09 845
<!-- Vue <transition> 通过事件钩子实现动态过渡案例2 --> <template> <div class="page"> <p> fade in <input type="range" min="0" :max="fadeMax" v-model="fadeInVal"/> fade out <input type="range" min="0" :max="fad...
vue大屏展示项目实例_vue.js知识点-transition的钩子函数应用（实例展示）
weixin_39787826的博客
12-12 261
本小结通过transition的钩子函数实现小球半场动画知识点1：入场、出场方法beforeEnter表示动画入场之前，此时，动画尚未开始，可以在beforeEnter中设置元素开始动画之前的起始样式enter表示动画开始之后的样式，这里可是设置小球完成动画之后的，结束状态enter(el,done)el:动画钩子函数的第一个参数：el，标识，要执行动画的DOM原始，是原生的JS DOM对象don...
Vue.js 2.0 参考手册.CHM
03-23
Vue.js 2.0 是一款流行的前端JavaScript框架，由尤雨溪开发，...通过深入学习并熟练运用这些知识点，开发者能够高效地利用Vue.js 2.0开发出高质量的前端应用。"Vue.js 2.0 参考手册"将帮助你逐步掌握这一强大的框架。
vue-978-1-8389-8482-3:使用 Vue.js 的前端开发项目
05-30
5. **生命周期**：Vue实例有其特定的生命周期，从创建到销毁的过程中有多个钩子函数，如beforeCreate、created、beforeMount、mounted等，开发者可以在这些钩子中执行初始化操作或响应性地更新数据。 6. **表单处理...
Vue.js 2.0 参考手册.chm
03-12
Vue.js 2.0 是一款轻量级的前端JavaScript框架，以其易学易用、高...通过Vue.js 2.0参考手册，开发者可以详细了解并掌握以上这些关键知识点，结合实际案例进行实践，不断提升自己的Vue技能，开发出高效、稳定的应用。
vue-978-1-7871-2746-3:Vue.js 2 Web 开发项目
05-30
Vue.js 2 Web 开发项目是针对前端开发者的一份详细指南，主要聚焦于使用Vue.js 2框架构建现代Web应用程序。Vue.js是一个轻量级、高性能的JavaScript库，旨在简化前端开发过程，提供数据绑定和组件化功能。在这个项目...
vue.js 2.0离线中文api
01-11
7. **生命周期**：每个Vue实例都有其生命周期，从创建、编译、挂载、更新到销毁的过程，每个阶段都可以通过钩子函数进行定制。 8. **路由管理**：对于单页应用，Vue Router提供了强大的路由管理功能，支持动态路由...
vue动画过渡 javascript钩子函数详解
weixin_43375997的博客
11-11 2021
vue动画过渡js钩子函数详解js钩子函数运行时间js钩子函数的过渡或动画总结 js钩子函数运行时间 js钩子函数的运行时机分三种情况： 不显示指定参数done：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
04-Vue的简单动画Transition，动画钩子函数，Animate第三方动画库，TransitionGroup列表动画
乐百寿
09-03 548
Vue的简单动画Transition，动画钩子函数，Animate第三方动画库，TransitionGroup列表动画
Vue--过渡与动画(transition)--使用/教程/实例
IT利刃出鞘的博客
11-06 1877
原文网址 简介 说明 本文用示例介绍Vue.js的过渡与动画的用法。 官网 进入/离开 & 列表过渡 — Vue.js 过渡基础 简介 过渡的类名 在进入/离开的过渡中，会有 6 个 class 切换。对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为...
VUE之过渡动画钩子函数+Velocity.js动画库
zuomengjia的博客
10-31 1603
前言 CSS实现方式 目前为止已经介绍了Vue过渡与动画实现方式，包含transition过渡类型动画和@keyframes类型动画。 JS钩子函数方式+第三方库 除了用CSS来实现vue的组件过渡与动画，还可以用JavaScript的钩子函数来实现，在钩子函数中直接操作DOM即可。正如之前所说，可以配合使用第三方 JavaScript 动画库，如 Velocity.js Velocity.js...
vue中的transition生命周期钩子
HansExploration的博客
06-12 1567
默认class名字为 v-leave, v-enter ...改名需在transition标签上添加name属性
Vue定义动画的钩子函数
木子小奇奇
08-01 896
1.0 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link href="../animate.css" rel=&quot
43 JS+Vue3制作动画和钩子函数
wgchen
12-07 429
[动画] JS+Vue3制作动画和钩子函数阐述指定不使用CSS动画使用JS编写动画效果before-enter 钩子函数enter 钩子函数after-enter 钩子函数 阐述 有时候我们不使用CSS制作动画，而使用JS来制作动画。 虽然CSS的动画比JS的效率要高，但JS在操作DOM和时间控制上有着优势。所以这节我们就来学习一下如何使用JavaScript+Vue3来制作动画。 指定不使用CSS动画 <html lang="en"> <head> <meta ch
Vue.js利用vue-router实现登录与注册组件之间的切换，并为各个组件添加mounted和beforeDestroy钩子函数
05-05
首先，在Vue.js的入口文件中，需要引入vue-router，并在Vue实例中注入： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const router = new VueRouter({ routes: [ { path: '/login', name: 'login', component: Login }, { path: '/register', name: 'register', component: Register } ] }) new Vue({ router, render: h => h(App) }).$mount('#app') ``` 在上述代码中，我们定义了两个路由，分别对应登录和注册组件。 接下来，在登录和注册组件中，我们可以添加mounted和beforeDestroy钩子函数，用于在组件挂载和销毁时执行一些操作。 ```javascript <template> <div> <!-- login form --> </div> </template> <script> export default { name: 'Login', mounted() { console.log('Login component mounted') }, beforeDestroy() { console.log('Login component destroyed') } } </script> ``` ```javascript <template> <div> <!-- register form --> </div> </template> <script> export default { name: 'Register', mounted() { console.log('Register component mounted') }, beforeDestroy() { console.log('Register component destroyed') } } </script> ``` 以上代码中，我们在组件的mounted钩子函数中输出了一条日志，表示组件已经挂载。在组件的beforeDestroy钩子函数中，我们也输出了一条日志，表示组件即将被销毁。 这样，我们就可以利用vue-router实现登录和注册组件之间的切换，并为各个组件添加mounted和beforeDestroy钩子函数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值