vue使用transition组件动画效果的实例代码

transition文档地址
定义一个背景弹出层实现淡入淡出效果

<template>
 <div>
  <button @click="show = !show">
   Toggle
  </button>
  <transition name="fadeBg">
   <div class="bg" v-if="show">hello</div>
  </transition>
 </div>
</template>

<script>
 export default {
  data: () => ({
   show: true
  }),
 };
</script>

<style lang="less" scoped>
 .fadeBg-enter-active,
 .fadeBg-leave-active {
  transition: opacity 0.3s ease;
 }

 .fadeBg-enter,
 .fadeBg-leave-to {
  opacity: 0;
 }

 .bg {
  position: fixed;
  top: 20px;
  left: 0;
  z-index: 105;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
 }
</style>

到此这篇关于vue使用transition组件动画效果的实例代码的文章就介绍到这了,更多相关vue transition组件动画内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue Transition实现类原生组件跳转过渡动画的示例

    Vue Transition实现类原生组件跳转过渡动画的示例

    最近学习了Vue Transition的用法,感觉这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记 官方文档:https://cn.vuejs.org/v2/guide/transitions.html 演示地址:http://www.coderlife.com (请在移动端查看,PC端查看请打开移动端调试模式) 前言 看了挺多Vue的UI框架都不带过渡动画,今天心血来潮,就把自己平时用的动效抽离出来.可直接通过脚手架init模版配合其他UI框架使用,不需要另外进行配置. 原理 模版中

  • vue组件 keep-alive 和 transition 使用详解

    1.keep-alive 能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. 当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行. include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓存. // 组件 export

  • Vue 过渡（动画）transition组件案例详解

    Vue 过渡（动画）transition组件案例详解

    Vue过度(动画),本质走的是CSS3:transtion,animation. 控制器div显示/隐藏,代码如下: <div id="box"> <input type="button" value="按钮" @click="toggle"> <div id="div1" v-show="isShow"></div> </div&g

  • vue内置组件transition简单原理图文详解(小结)

    基本概念 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库,如 Velocity.js 简单用法 用 v-if/v-show 控制显示隐藏,使用transition 组件控制其变化过程 一个页面子组件 router-view 的消失隐藏,使用transi

  • vue 组件中使用 transition 和 transition-group实现过渡动画

    前言 记一次vue 组件中使用 transition 和 transition-group 设置过渡动画,总结来说可分为分为 name 版, js 钩子操作类名版, js 钩子操作行内样式版... template模板结构 // 单个元素 <transition name="自定义名字"> <p v-if="show">hello</p> </transition> // 列表元素: 注意group的直接子元素是v-f

  • vue使用transition组件动画效果的实例代码

    transition文档地址 定义一个背景弹出层实现淡入淡出效果 <template> <div> <button @click="show = !show"> Toggle </button> <transition name="fadeBg"> <div class="bg" v-if="show">hello</div> </tra

  • vue 实现数字滚动增加效果的实例代码

    项目中需要做数字滚动增加的效果,一开始很懵,研究了一下原理,发现很简单,贴出来分享一下 ^_^ 数字滚动组件: <template> <div class="number-grow-warp"> <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</sp

  • vue.js层叠轮播效果的实例代码

    最近写公司项目有涉及到轮播banner,一般的ui框架无法满足产品需求:所以自己写了一个层叠式轮播组件:现在分享给大家: 主要技术栈是vue.js ;javascript;jquery:确定实现思路因工作繁忙,暂时不做梳理了:直接贴代码参考: 此组件是基于jquer封装,在vue项目中使用首先需要先安装jquery插件:指令:npm install jquery,安装完成之后再webpack.base.conf.js配置插件: plugins: [ new webpack.ProvidePlug

  • vue路由前进后退动画效果的实现代码

    vue-route-transition vue router 切换动画 特性 模拟前进后退动画 基于css3流畅动画 基于sessionStorage,页面刷新不影响路由记录 路由懒加载,返回可记录滚动条位置 前进后退的判断与路由路径规则无关 支持任意基于Vue的UI框架 demo   手机扫码 在线预览 说明 配套包含两个组件 vue-route-transition 负责动画 router-layout 负责页面排版. 主要是解决transform动画,position:fixed异常问题

  • iOS自带动画效果的实例代码

     1.普通动画: [UIView beginAnimations:nil context:nil]; [UIView setAnimationDuration:2]; frame.origin.x += 150; [img setFrame:frame]; [UIView commitAnimations]; 2.连续动画(一系列图像): NSArray *myImages = [NSArray arrayWithObjects: [UIImage imageNamed:@"myImage1.p

  • Vue中的组件及路由使用实例代码详解

    1.组件是什么 组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声明及使用 全局组件 <body> <div id="app"> <!-- 用全局组件的名称作为HTML的标签 --> <myzujian></myzujian> </div> </body> <script>

  • Android仿视频加载旋转小球动画效果的实例代码

    Android仿视频加载旋转小球动画效果的实例代码

    先上个效果图,以免大家跑错地了. 嗯,除了只能录三秒,其他没啥问题. 下面分析一下怎么实现上面这个效果. 理性分析后我们可以看到是几个小球绕着一个圆进行运动,那这里面的重点我们看看什么. 绘制五个球,没什么难度,让球绕圆进行运动,这个好像我们没有见到是怎么去实现了,那下就说这个. 从本质上看,球绕圆运动,其实我们可以看作是一个物体绕指定的路劲运动,那我们就有下面几个东西需要说一下: 1:Path 2:ValueAnimator 3:PathMeasure 前两个大家应该都见过,一个是路径,就是可

  • vue+swiper实现组件化开发的实例代码

    swiper的组件 <template> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="item in swiper"><img :src="item.room_src" alt="">&l

  • Android使用Rotate3dAnimation实现3D旋转动画效果的实例代码

    Android使用Rotate3dAnimation实现3D旋转动画效果的实例代码

    利用Android的ApiDemos的Rotate3dAnimation实现了个图片3D旋转的动画,围绕Y轴进行旋转,还可以实现Z轴的缩放.点击开始按钮开始旋转,点击结束按钮停止旋转. 代码如下:: Rotate3dAnimation.java public class Rotate3dAnimation extends Animation { private final float mFromDegrees; private final float mToDegrees; private fi

  • jQuery实现动画效果的实例代码

    复制代码 代码如下: <style type="text/css">       table{border:1px solid #666;}       table td{border:1px solid #eee;width:200px;height:200px;}       img{width:200px;height:200px;border:none;position:relative;}    </style> <script src=&quo

随机推荐