vue动画中的过渡组件

最新推荐文章于 2023-09-11 19:46:59 发布
最新推荐文章于 2023-09-11 19:46:59 发布
阅读量125 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KiritoK/article/details/107460904
版权

vue动画中的过渡组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <button @click="which=='com1' ? which='com2' : which='com1' ">toggle</button>
    <transition-com>
      <component :is="which"></component>
    </transition-com>

  </div>
  <script>
    Vue.component('transition-com', {
      template: `
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" mode="out-in" appear >
          <slot></slot>
        </transition>
      `,
      methods: {
        beforeEnter(el) {
          el.style.opacity = '0';
        },
        enter(el,done) {
          el.offsetWidth;
          el.style.opacity = '1';
          el.style.transition = 'all 2s';
          done();
        },
        afterEnter(el) {
          el.style.opacity = '1';
        }
        ,
        beforeLeave(el) {
          el.style.opacity = '1';
        },
        leave(el,done) {
          el.offsetWidth;
          el.style.opacity = '0';
          el.style.transition = 'all 2s';
          //注意不要写成done()，否则会立即执行
          setTimeout(done,2000);
        },
        afterLeave(el) {
          el.style.opacity = '0';
        }
      }
    });
    Vue.component('com1', {
      template: `<div>123</div>`
    });
    Vue.component('com2', {
      template: `<div>abc</div>`
    });
    var vm = new Vue({
      el: '#app',
      data: {
        which: 'com1'
      }
    })
  </script>
</body>
</html>
KiritoK
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 动画组件
weixin_45581406的博客
10-31 965
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具： 在 CSS 过渡和动画中自动应用 class–基础动画 可以配合使用第三方 CSS 动画库，如 Animate.css–CSS动画 在过渡动画钩子函数中使用 JavaScript 直接操作 DOM—JS动画 可以配合使用第三方 JavaScript 动画库，如 Velocity.js—JS动画库 Vue 提供...
vue过渡动画的transition组件
liangsaichi的博客
05-25 773
什么是过渡动画 就是从一个状态向另一个状态插入值，新的状态替换了旧的状态。 transition Vue为标签内部的元素提供了3个进入过渡的类和3个离开过渡的类。如下： 进入过渡的类： v-enter 开始 v-enter-active 过渡 v-enter-to 结束 离开过渡的类： v-leave 开始 v-leave-active 过渡 v-leave-to 结束 基本使用方法： 在动画的标签外面嵌套一个标签，当为添加name=“名字”；例name=“fade”,fade就是在过渡中切换的类
Vue+Element的@select和@enter同时触发，发送两次请求
fenger_c的博客
09-21 1451
写了个输入建议框，有回车触发时间，也会选择触发时间，当回车时，就触发了@enter和@select的事件，请求发送了两次。 解决办法： @keyup.enter.native="$event.target.select" @select="handleSubmit" $event.target.select是指回车的时候触发的是@select的方法，也就是handleSubmit方法。 ...
【Vue】监听Enter键
最新发布
慕白Lee的博客
09-11 5618
在上述代码中，`@keyup.enter.native`修饰符绑定到输入框上，当用户释放按键时，如果按下的是Enter键，则会调用`handleEnterKey`方法来处理逻辑。在上面的代码中，`@keydown.enter`指令绑定到输入框上，当用户按下Enter键时，会调用`handleEnterKey`方法来处理逻辑。`@keydown.enter`和`@keyup.enter.native`都可以用于监听Enter键的按下事件，但它们之间存在一些区别。你可以根据自己的需求选择其中一种方式来实现。
【vxe-table】@enter.keyup.native实现在列表中回车光标向右移动聚焦及vxe-table的一些方法的使用（具体实现+踩坑篇）
花椒和蕊的博客
09-08 1690
【vxe-table】@enter.keyup.native实现在列表中回车光标向右移动聚焦及vxe-table的一些方法的使用（具体实现+踩坑篇）
vue中enter回车键事件
月来better
01-16 1万+
项目中在搜索商品时，在没有搜索按钮的情况下，刚开始是写的当用户输入完成后，input框失去焦点blur事件处理，产品提议用户输入后，按enter回车键返回搜索结果。 vue中失去焦点事件写法：@blur vue中enter回车键事件写法：@keyup.enter.native <el-input v-model="searchName" @keyup.enter.native="toSearch()" placeholder="请输入搜索的名称"></el-input> to
vue动画
weixin_47039303的博客
10-24 76
1.动画 <transition @before-enter=“beforeEnter” @enter=“enter” @after-enter=“afterEnter” <div class="ball" v-show="flag"></div> var Vue=new Vue({ el:"#app", data:{ “flag”:false }, methods:{
Vue运用transition实现过渡动画
10-17
Vue中的过渡动画主要依赖于`<transition>`组件，它可以应用在元素、组件或动态组件上，配合CSS动画或者JavaScript钩子函数，实现各种复杂的过渡效果。在本篇文章中，我们将深入探讨如何使用`<transition>`来实现过渡...
vue中组件的过渡动画及实现代码
10-17
主要介绍了vue中组件的过渡动画，并通过实例代码给大家介绍了过渡动画的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue 过渡（动画）transition组件案例详解
08-31
要添加过渡效果，我们需要在`transition`组件中声明一个名称，例如`name="fade"`，这样Vue就能生成对应的CSS类名来控制过渡。在CSS中，我们需要定义`.fade-enter-active`和`.fade-leave-active`类，它们定义了过渡的...
Vue.js 过渡 & 动画
12-13
### 过渡组件的使用 Vue的`<transition>`组件用于包裹需要过渡效果的元素或组件。当包裹的元素或组件状态变化时，Vue会自动应用相应的CSS类，从而触发过渡效果。例如： ```html <p v-if="show">Hello ``` 在这...
按钮绑定回车事件
guo0818的博客
02-25 9624
$("body").keydown(function() {              if (event.keyCode == "13") {//keyCode=13是回车键                  $('#btnSumit').click();              }          });
终于搞懂了回车与换行的区别
我的专栏
02-03 8万+
转载于：http://www.pythontab.com/html/2017/linuxkaiyuan_0115/1116.html 关于换行和回车其实平时我们不太在意，所以关于两者的区别也不太清楚，在平时开发时可能会遇到一些文件处理的问题，放到不同的操作系统上出现各种坑。那么回车和换行到底有哪些区别呢？今天咱们就来总结一下。 1. 由来 在计算机还没有出现之前，有一种叫做电传打
vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native
热门推荐
Kuroko's Development Notes
05-18 13万+
vue运行为v-on在监听键盘事件时，添加了特殊的键盘修饰符： &lt;input v-on:keyup.13="submit"&gt; vue还非常贴心地给出了常用按键的别名，这样就不必去记keyCode ~ ~ 上面代码，还可以在这样写：   &lt;input v-on:keyup.enter="submit"&gt; &lt;input @keyup.enter="submit...
登陆回车（Enter）事件
吃货的博客
06-26 2707
function keyLogin(event){ //谷歌能识别event，火狐识别不了，所以增加了这一句，chrome浏览器可以直接支持event.keyCode var theEvent = window.event || arguments.callee.caller.arguments[0]; var key = theEvent.keyCode; ...
监听enter（回车）事件
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
04-24 2601
&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;jQuery监听enter（回车）&lt;/title&gt;&lt;script src="http://test-wx.ixincheng.com//xcview/js/common/jquery-2.
vue中@keyup.enter.native输入法的回车与消息发送快捷键回车的冲突解决
chi1130的博客
12-24 1万+
问题 当你在中文输入法下输入然后回车后，发现表单提交了。 代码 &amp;amp;lt;el-col :span=&amp;quot;14&amp;quot;&amp;amp;gt; &amp;amp;lt;el-input type=&amp;quot;text&amp;quot; v-model=&amp;quot;loginForm.content&amp;quot; autocomplete=&amp;quot
Enter 键执行事件
小贤笔记
11-20 276
注: 文章摘自:lx_1024 - CSDN 如果是原生的 input，使用 @keyup.enter 就可以，若是使用了element-ui，则要加上 native 限制符，因为 element-ui 把 input 进行了封装，原事件就不起作用了，代码如下： 原生 &lt;input v-model="form.name" placeholde...
Vue 中的按键别名（.enter）和修饰键（.ctrl）
Latency の 博客
09-30 1万+
1、按键别名 在监听键盘事件时，我们经常需要监测常见的键值。Vue 允许为 v-on 在监听键盘事件时添加关键修饰符： 对于一些常用键，Vue 还提供了按键别名： 全部的按键别名：  .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right 2、修饰键 除了
vue 组件切换过渡动画
08-03
回答: 在Vue中，可以通过使用过渡组件和CSS动画来实现组件切换的过渡动画效果。首先，可以使用Vue的过渡组件来包裹需要过渡的组件，例如使用<transition>标签包裹<router-view>或其他需要过渡的组件。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值