Vue运用transition实现过渡动画

vue的过渡动画，主要是transition标签的使用，配合css动画实现的。官方文档css过渡

通过点击事件来切换show的值来改变显示的文本，下面的css通过进入离开时的在匀速状态下xxs（秒）下来转换在x轴上位移的距离， transition包括的是位移的内。key是必须有的，用来标记位移的哪一个，这个方法有一点，用v-if时会频繁的建立销毁。name是你定义的名字必须有，和css里面的名字是保持一致的，你可以自定义名字。

使用它时有时候切换的并不是标签，而是一个组件，这时候应该使用transition-group来包括。

<template>
 <div>
 　　<div>
  　　<span @click="show = 0">第一个</span>
   <span @click="show = 2">第二个</span>
   <span @click="show = 3">第三个</span>
  </div>
  <transition-group name="slide">
  　　<div v-show="show == 0" key="0">第一个文本</div>
   <div v-show="show == 2" key="2">第二个文本</div>
   <div v-show="show == 3" key="3">第三个文本</div>
  </transition-group>
 </div>
</template>
<script>
 export default {
  data () {
  　　return {
   show:0
   }
  }
 }
</script>
<style>
 .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>

总结

以上所述是小编给大家介绍的Vue运用transition实现过渡动画 ，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • 详解vue2.0 transition 多个元素嵌套使用过渡

    在做vue的demo的时候遇到一个问题,多个嵌套的元素如何设置transition? 我的代码: <div id='demo'> <button @click="show = !show">按钮</button> <transition name='move'> <div class="v-d" v-show="show"> <div class='in in_move'>&

  • Vue-router结合transition实现app前进后退动画切换效果的实例

    一丶首先配置路由并且修改路由配置 路由配置就不讲了重点,给VueRoute添加一个goBack方法,用于记录路由的前进后退状态 this.isBack = true VueRouter.prototype.goBack = function () { this.isBack = true window.history.go(-1) } 二丶监听路由变化(在路由变化时判断此时的路由状态是前进还是后退) <template> <div> 动态绑定路由动画,根据路由状态的不同绑定不同的路

  • vue2.0 中使用transition实现动画效果使用心得

    实践 这里将通过四个实践小案例来体验和学习css过渡,css动画,javascript钩子,列表过渡的应用.至于案例用到的知识点就请自行学习官网文档. 1.css过渡–实践 先来看看demo效果: 这个案例其实很简单,通过一个transition来触发多个子元素的过渡效果,我们只需要定义元素对应的过渡效果就可以,其他事情vue会帮我们搞定,由此可以扩展出其他酷炫的过渡场景效果.先来看看这个简单案例的代码实现: <template> <div class="app"&g

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

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

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

  • 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 transition感觉这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 本来打算自己造一个transition的轮子,所以决定先看看源码,理清思路.Vue的transition组件提供了一系列钩子函数,并且具有良好可扩展性. 了解构建过程 既然要看源码,就先让Vue在开发环境跑起来,首先从GitHub clone下来整个项目,在文件./github/CONTRIBUTING.md中看到了如下备注,需要强调一下的是,npm run dev构建的是runtime +

  • Vue运用transition实现过渡动画

    vue的过渡动画,主要是transition标签的使用,配合css动画实现的.官方文档css过渡 通过点击事件来切换show的值来改变显示的文本,下面的css通过进入离开时的在匀速状态下xxs(秒)下来转换在x轴上位移的距离, transition包括的是位移的内.key是必须有的,用来标记位移的哪一个,这个方法有一点,用v-if时会频繁的建立销毁.name是你定义的名字必须有,和css里面的名字是保持一致的,你可以自定义名字. 使用它时有时候切换的并不是标签,而是一个组件,这时候应该使用tra

  • Vue入门之animate过渡动画效果

    简介: transition方法的使用 transition内置方法 transition-group animate库实现过渡动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

  • Vue中的基础过渡动画及实现原理解析

    前言 在日常开发中 动画是必不可少的一部分 不仅能让元素直接的切换显得更加自然 同时也能极大的增强用户体验 因此 在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡效果 同时也是支持JS的 不过在这个文章中讲述的都是如何利用CSS来实现过渡动画.keyframes动画以及实现的原理 过渡动画实现的原理 1.首先最基础的一点在于 如果你想要在单元素/单个组件之中实现过渡动画 那么 你需要在元素/组件所在的HTML标签之外包裹一层  <transition>标签

  • vue中组件的过渡动画及实现代码

    vue中组件的过渡动画及实现代码

    1.  和多个元素的过渡一样,用组件来替换transition中包裹的标签 <style> .fade-enter, .fade-leave-to { opacity: 0 } .fade-enter-active, .fade-leave-active { transition: opacity 2s } </style> </head> <body> <div id="demo"> <button @click=&q

  • Vue.js实现微信过渡动画左右切换效果

    Vue.js实现微信过渡动画左右切换效果

    前言 在awesomes上寻找移动端框架的时候意外发现了vux的页面切换效果,后面由于其他考虑没有选用vuex但是这个切换效果确实感觉很有新意,也就看了下源码,这里贴一份备用. 需要用到的技术栈:Vue+Vuex 先看看效果图 过渡动画 示例代码 //app.vue <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')"> <keep-alive> <router-

  • 简单谈谈vue的过渡动画(推荐)

    简单谈谈vue的过渡动画(推荐)

    在vue中,实现过渡动画一般是下面这样: <transition name="fade"> <div></div> </transition> 用一个transition对元素或者组件进行封装. 在过渡的时候,会有 4 个(CSS)类名在 enter/leave 的过渡中切换. 1.v-enter: 定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移除. 2.v-enter-active: 定义进入过渡的结束状态.在元素被插入时生效

  • vue实现列表滚动的过渡动画

    本文实例为大家分享了Vue实现列表滚动过渡动画的具体代码,供大家参考,具体内容如下 效果图 失帧比较严重,在手机上效果更佳. 原理分析 这个滚动页面由两个部分布局(底部固定的Tab页面除外).一个是顶部的banner轮播,一个是下面的列表.这里的重点是做列表的动画,banner轮播的网上资料很多,请自行查找. 这个动画最重要的是在滚动中实时计算startIndex和endIndex,动画比较简单,就是scale和opacity的变化.向下滚动时,startIndex变小:向上滚动时,endInd

  • 十分钟带你快速上手Vue3过渡动画

    十分钟带你快速上手Vue3过渡动画

    目录 写在前面 Vue的transition组件 过渡demo class的命名规则 使用animation 过渡模式 appear属性 animate.css库的使用 使用动画序列 使用自定义过渡class 写在最后 写在前面 在实际开发中,为了增加用户体验,经常会使用到过渡动画,而过渡动画在CSS中是通过transition和animation实现的.而在Vue中,Vue本身中内置了一些组件和API可以帮助我们方便的实现过渡动画效果:接下来我们就学习一下. Vue的transition组件

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

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

随机推荐