vue中transition组件在项目中运用小结

​vue中的transtion是一个动画过渡封装组件，常见的情景时用transition标签包裹的DOM含有动画效果。transition组件的动画效果过渡设置基于css的transition属性设置。下面给大家介绍下vue中transition组件在项目中运用。

单个弹入弹出运用

注意：

  • name的名字为多少，则下面的样式class开头就要为多少
  • 通过v-if来配合执行动画效果
<template>
  <div>
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
  </div>
</template>

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

<style scoped lang="less">
.fade-enter-active,
.fade-leave-active {
  transition: all .5s;
}
 .fade-leave-to  {
  opacity: 0;
  transform: translateX(20px);
}
.fade-enter{
  opacity: 0;
  transform: translateX(-20px);
}
</style>

内容切换控制效果

注意 ：

  1. key：可以为任意值，通过key值切换而控制动画切换。 组件可以任意， 不变都行，变不变取决于自己。可以用component标签配合is，或者直接v-if也可以。
  2. 绑定key的那个组件需要设置为绝对定位，否则切换会出现卡顿。 也可以设置mode="out-in"或者mode=“in-out” 一前一后。 看自己个人的需求了
<template>
  <div>
    <transition name="fade">
      <button class="position" @click="change" :key="status">
        组件
      </button>
    </transition>
  </div>
</template>

<script>
export default {
  data () {
    return {
      status: '1',
    }
  },
  methods: {
    change () {
      if(this.docState === '1'){
        this.docState = '2'
      }else{
        this.docState = '1'
      }
    }
  }
}
</script>

<style scoped lang="less">
.fade-enter-active,
.fade-leave-active {
  transition: all .5s;
}
 .fade-leave-to  {
  opacity: 0;
  transform: translateX(20px);
}
.fade-enter{
  opacity: 0;
  transform: translateX(-20px);
}
.position{
  position: absolute;
}
</style>

配合animate框架使用

注意

  • name的值必须设置为 ：custom-classes-transition
  • enter-active-class， leave-active-class来控制出现和消失的样式
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="external nofollow"  rel="stylesheet" type="text/css">

<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</div>

页面第一次加载执行动画

给transition添加 appear

到此这篇关于vue中transition组件在项目中运用的文章就介绍到这了,更多相关vue中transition组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 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 在子组件中失效的解决

    错误代码: 子组件: <template> <div v-show="showMine"> <div class="mask" @click.self="onMask"></div> <transition name="slide-fade"> <div class="my_group" v-if="showMine"&g

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

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

  • Vue中的transition封装组件的实现方法

    vue版本信息:2.5.2 问题起源于使用Vue做网站时涉及到的一个小部件显示动画,阅读了Vue的文档后结合网上各位的经验,花了点时间研究了下. 最终的效果如上图所示,当鼠标移入灰色方块时弹出层会至上而下显示出来,类似于 拉链式窗帘(?). 实例 实现上图所示的效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

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

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

  • vue中transition组件在项目中运用小结

    ​vue中的transtion是一个动画过渡封装组件,常见的情景时用transition标签包裹的DOM含有动画效果.transition组件的动画效果过渡设置基于css的transition属性设置.下面给大家介绍下vue中transition组件在项目中运用. 单个弹入弹出运用 注意: name的名字为多少,则下面的样式class开头就要为多少 通过v-if来配合执行动画效果 <template> <div> <button v-on:click="show =

  • vue踩坑记-在项目中安装依赖模块npm install报错

    在维护别人的项目的时候,在项目文件夹中安装npm install模块的时候,报错如下: npm ERR! path D:\ShopApp\node_modules\fsevents\node_modules\abbrev npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall access npm ERR! enoent ENOENT: no such file or directory, access 'D:\ShopApp\nod

  • Intellij IDEA中如何查看maven项目中所有jar包的依赖关系图

    Maven 组件界面介绍 如上图标注 1 所示,为常用的 Maven 工具栏,其中最常用的有: 第一个按钮:Reimport All Maven Projects 表示根据 pom.xml 重新载入项目.一般单我们在 pom.xml 添加了依赖包或是插件的时候,发现标注 4 的依赖区中没有看到最新写的依赖的话,可以尝试点击此按钮进行项目的重新载入. 第六个按钮:Execute Maven Goal 弹出可执行的 Maven 命令的输入框.有些情况下我们需要通过书写某些执行命令来构建项目,就可以通

  • JSP开发中在spring mvc项目中实现登录账号单浏览器登录

    JSP开发中在spring mvc项目中实现登录账号单浏览器登录 在很多web产品中都需要实现在同一时刻,只能允许一个账号同时只能在一个浏览器当中登录.通俗点讲就是当A账号在 浏览器1当中登录了,此时在浏览器2中登录A账号.那么在浏览器1中的A账号将会被挤出去,当用户操作浏览器1的页面,页面会 跳到登录页面,需要重新登录.那么我们怎么实现这样的功能呢?下面将给大家进行详细的介绍: 原理 用户A使用账号a在浏览器当中登录,然后用户B在另外一台电脑上的浏览器登录账号a,当用户B登录验证成功时,将会触

  • vue之项目中如何封装loading加载效果

    目录 vue封装loading加载效果 Loading.vue loading.js main.js中导入并使用 项目中使用Loading加载 总结 vue封装loading加载效果 使用两个文件,vue文件是loading加载效果页面,JS文件用于main.js中use,供全局使用 Loading.vue <template> <div v-if="show" class="loading-container"> <div class

  • 浅谈web服务器项目中request请求和response的相关响应处理

    我们经常使用别人的服务器进行构建网站,现在我们就自己来写一个自己的服务来使用. 准备工作:下载所需的题材及文档 注:完整项目下载 一.request请求获取  1.了解request请求 在写服务器之前,我们需要知道客户端发送给我们哪些信息?以及要求我们返回哪些信息?经过测试我们能够知道用户客户端发送的信息有以下几点: 客户端发送到服务器端的请求消息,我们称之为请求(request),其实就是一个按照http协议的规则拼接而成的字符串,Request请求消息包含三部分: 请求行 消息报头 请求正

  • Vue transition组件简单实现数字滚动

    Vue transition组件简单实现数字滚动

    目录 实现效果 Scrip 布局 动画 逻辑控制 总结 实现效果 Scrip <template> <button @click="addCount">点我滚动数字</button> <div class="roll-container"> <transition name="roll"> <div class="roll-number" :key="

  • Vue单文件组件基础模板小结

    背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点,童鞋们可以在评论里帮我补充:因为有这么多优点,所以决定有必要将vue组件的常用配置项提炼出来,形成一个组件模板,方便日后项目开发复用 <template> <div> <h1>{{title}}</h1> <ChildComponents></

  • 构建Vue大型应用的10个最佳实践(小结)

    这些是我构建大型Vue项目得出的最佳实践,这些技巧将帮助你更高效的编码,并且使其更容易维护和协作. 在我今年的自由职业生涯中我有幸开发了一些大型Vue程序.我所说的这些项目使用了大量Vuex stores

随机推荐