Vue 动画效果、过渡效果_vue动画图示-程序员宅基地

技术标签: Vue学习笔记  vue  

动画效果

在这里插入图片描述

新建 Test.vue

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition>
      <h1 v-show="isShow">你好 Vue</h1>
    </transition>
  </div>
</template>

<script>
export default {
      
  name: "Test",
  data() {
      
    return {
      
      isShow: true
    }
  }
}
</script>

<style scoped>
h1 {
      
  background-color: orange;
}

.v-enter-active{
      
  animation: myAni 1s;
}

.v-leave-active{
      
  animation: myAni 1s reverse;
}

@keyframes myAni {
      
  from{
      
    transform: translateX(-100%);
  }
  to{
      
    transform: translateX(0px);
  }
}
</style>

App.vue

<template>
  <div>
    <Test/>
  </div>
</template>

<script>
//引入组件
import Test from "./components/Test";

export default {
      
  name: 'App',
  components: {
      
    Test
  }
}
</script>

<style>
</style>

注意点
1、如果给 transition 标签增加了 name 属性

<transition name="hello">
	<h1 v-show="isShow">你好 Vue</h1>
</transition>

那么动画过渡类名也需要修改:

.hello-enter-active{
    
  animation: myAni 1s;
}

.hello-leave-active{
    
  animation: myAni 1s reverse;
}

2、如果想让程序一执行就执行一次动画,那么需要增加 appear

注意 appear 前要有冒号,不写冒号就相当于一个普通属性,值是字符串是 “true”

<transition :appear="true">
      <h1 v-show="isShow">你好 Vue</h1>
    </transition>

或者简写

<transition>
      <h1 v-show="isShow">你好 Vue</h1>
    </transition>

过渡效果

单个元素

复制一份 Test.vue 重命名为 Test2.vue,记得 App 中注册使用

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition appear>
      <h1 v-show="isShow">你好 Vue</h1>
    </transition>
  </div>
</template>

<script>
export default {
      
  name: "Test",
  data() {
      
    return {
      
      isShow: true
    }
  }
}
</script>

<style scoped>
h1 {
      
  background-color: orange;
  /*transition:  0.5s linear;*/
}

/*进入的起点,离开的终点*/
.v-enter, .v-leave-to {
      
  transform: translateX(-100%);
}
/*进入的过程,离开的过程*/
.v-enter-active, .v-leave-active {
      
  transition: 0.5s linear;
}
/*进入的终点,离开的起点*/
.v-enter-to, .v-leave {
      
  transform: translateX(0);
}
</style>

在这里插入图片描述

多个元素

在这里插入图片描述

<transition-group>
      <h1 v-show="isShow" key="1">你好 Vue</h1>
      <h1 v-show="!isShow" key="2">闭关修炼 沉迷学习</h1>
    </transition-group>

Animate.css

根据 官网 的使用教程安装、引入、使用即可

1、复制一个 Test2.vue 重命名为 Test3.vue,并在 App 中引入使用
2、安装 Animate.css,运行 npm install animate.css执行安装
3、Test3.vue 中引入,import 'animate.css';
4、transition-group 标签中增加 name="animate__animated animate__bounce"
5、增加一个动画,例如我们增加一个进入动画 enter-active-class="animate__swing",再增加一个离开动画

其中官网右侧列出了动画名,点击可查看效果,同时后边可以复制动画名
在这里插入图片描述
Test3.vue 完整代码

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition-group
        appear
        name="animate__animated animate__bounce"
        enter-active-class="animate__swing"
        leave-active-class="animate__backOutUp"
        >
      <h1 v-show="isShow" key="1">你好 Vue</h1>
      <h1 v-show="!isShow" key="2">闭关修炼 沉迷学习</h1>
    </transition-group>
  </div>
</template>

<script>
import 'animate.css';
export default {
      
  name: "Test",
  data() {
      
    return {
      
      isShow: true
    }
  }
}
</script>

<style scoped>
h1 {
      
  background-color: orange;
}
</style>

查看效果:

在这里插入图片描述

总结

Vue 封装的过渡与动画
1.作用:在插入、更新或移除DOM元素时,在合适的时候给元素添加样式类名
2.图示:
在这里插入图片描述

摘自 Vue 官网

3.写法:
1)准备好样式:

  • 元素进入的样式:
    1.v-enter进入的起点
    2.v-enter-active进入过程中
    3.v-enter-to进入的终
  • 元素离开的样式:
    1.v-leave离开的起点
    2.v-leave-active离开过程中
    3.v-leave-to离开的终点

2)使用<transition>包裹要过度的元素,并配置name属性:<transition name="hello">(可选)

3.备注:若有多个元素需要过度,则需要使用<transition-group>,且每个元读都要指定 key 值

todolist 增加动画效果

现在给增加和删除增加动画效果,所以修改 Item.vue 用 <transition>标签包裹,然后增加动画即可

<template>
  <transition name="todo" appear>
	......
    </li>
  </transition>
</template>

<script>
......
</script>

<style scoped>
......

.todo-enter-active {
      
  animation: myAni 1s;
}

.todo-leave-active {
      
  animation: myAni 1s reverse;
}

@keyframes myAni {
      
  from {
      
    transform: translateX(100%);
  }
  to {
      
    transform: translateX(0px);
  }
}
</style>

查看效果
在这里插入图片描述
当然也可以把样式加到 List.vue 中,修改一下:

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u010356768/article/details/124085403

智能推荐

P1数据结构和算法绪论_p1 结构-程序员宅基地

文章浏览阅读231次。1.什么是数据结构:数据结构就是关系,没错,就是数据元素相互之间存在的一种或多种特定关系的集合!2.传统上说,数据结构分为逻辑结构和物理结构;逻辑结构:是指数据对象中的数据元素之间的相互关系,是今后将讨论和关注的问题!逻辑结构分为4大逻辑结构:01集合结构:只属于同一个集合,元素之间没有关系,02线性结构:一对一03树形结构:一对多的层次关系04图形结构:多对多物理结构:指数据的逻..._p1 结构

Salesforce 如何把签卡数据同步到中控系统_salesforce 签到打卡功能-程序员宅基地

文章浏览阅读1.1w次。一、考勤界面二、分析1)同步数据首先要得到数据,如何得到数据呢? 第一步:创建签卡数据的触发器 第二步:创建同步日志类,把所有的签卡信息都添加到同步日志里2)从数据源得到数据后以Json格式传递 3)创建一个SpringMVC的Maven工程, a、以阿里巴巴的Druid配置数据源, b、创建个定时器,每隔一分钟从Salesforce的日志里读取信息_salesforce 签到打卡功能

测试理论基础——测试用例_测试初始值,需求项,重新测试初始值是什么测试用例-程序员宅基地

文章浏览阅读287次。测试理论基础——测试用例测试用例测试用例编号用例的元素必要元素非必要元素测试用例的优缺点用例的设计原则测试用例QQ我们经常在用,那么如果让我们来测试QQ的登录界面,如何去测试呢?将软件测试的行为活动,作为一个科学化的组织规划。为实施测试而向被测试系统提供的输入数据、操作或各种环境设置以及期望结果的一个特定的集合。解决要测什么、怎么测和如何衡量的问题元素: 用例编号、测试要点、初始条件、优先级、详细步骤、输入数据、预期结果、实际结果等测试用例编号字符和数字组合成的字符串,用例编号应具有唯一_测试初始值,需求项,重新测试初始值是什么测试用例

StringBuilder类常用方法(Java)_stringbuilder有isempty方法吗-程序员宅基地

文章浏览阅读773次,点赞28次,收藏10次。StringBuilder类常用方法_stringbuilder有isempty方法吗

kettle启动“Error: could not create the Java Virtual Machine”_kettle error:could not create the java virtual mac-程序员宅基地

文章浏览阅读1w次,点赞5次,收藏2次。kettle启动“Error: could not create the Java Virtual Machine”_kettle error:could not create the java virtual machine

Smali语法详解_.method public registered( ) z .locals 2 .prologue-程序员宅基地

文章浏览阅读3.4w次,点赞15次,收藏92次。smali文件格式每个smali文件都由若干条语句组成,所有的语句都遵循着一套语法规则。在smali 文件的头3 行描述了当前类的一些信息,格式如下:[java] view plaincopy.class [ 修饰关键字] .super .source 打开MainActivity.smali 文件,头3 行代码如下:[java] _.method public registered( ) z .locals 2 .prologue const/4 v0, 0x1 .local v0

随便推点

March我来了!-程序员宅基地

文章浏览阅读425次。on march 7 | sunny沉静了那么久,我终于来了。哎态度差了很多嘛!看以前3个月的帖子阅读量成递减趋势我就知道我写的东西是慢慢的少了,质量也下降了,想想自己最近的近况也是惨,科目3又挂了,6级也挂了,哎,回家又长了好多肉!好了不矫情了,3月我来了。这个月我的目标是马上进入状态。压力是自己给的没错,可每天都是想着这些压力啊,烦恼啊,不去行动真的是越压越大。就比如答应给同学做一个视

hadoop启动HDFS命令_hdfs启动命令-程序员宅基地

文章浏览阅读3.2k次。启动命令:/hadoop/sbin/start-dfs.sh停止命令:/hadoop/sbin/stop-dfs.sh_hdfs启动命令

来自我的新浪博客的技术文章_新浪博客技术-程序员宅基地

文章浏览阅读246次。来自我的新浪文博的技术文章:外文检索;OpenCV;奇异值分解;MATLAB_新浪博客技术

详解Xftp设置UTF-8编码的方法_sftp设置传输字符编码-程序员宅基地

文章浏览阅读4.2k次。原网址:http://www.xshellcn.com/zhishi/shezhi-bianma.html。在Xftp远程连接的时候,经常会出现中文乱码(仅指Linux主机使用UTF-8的情况下),为了解决该问题,我们需要通过设置UTF-8编码方式,防止乱码。那么具体是如何操作的呢?下面就一起来学习设置UTF-8编码的方法。具体的解决方案如下:步骤一:打开 Xftp软件,在菜单栏单击[..._sftp设置传输字符编码

c 获取char*的长度_MySQL中varchar最大长度是多少(仅学习)-程序员宅基地

文章浏览阅读104次。出处:MySQL中varchar最大长度是多少? - yayun - 博客园目录一. varchar存储规则:二. varchar和char 的区别: ps :被问到一个问题:MySQL中varchar最大长度是多少?1、限制规则2、计算例子3、varchar物理存储4、InnoDB中的varchar5、MyISAM中的varchar一. varchar存储规则:4.0版本以下,varchar(2..._char *a a 的字符长度

JAVA webSocket客户端获取服务端数据_java websocket取数-程序员宅基地

文章浏览阅读3.4k次,点赞2次,收藏11次。上代码<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> <dependency> <groupId>org.java-websocket</groupId> _java websocket取数

推荐文章

热门文章

相关标签