vue动画

最新推荐文章于 2024-07-11 11:14:36 发布

inno Vation

最新推荐文章于 2024-07-11 11:14:36 发布

阅读量49

点赞数

分类专栏： vue 文章标签： vue.js javascript css

本文链接：https://blog.csdn.net/weixin_53945110/article/details/129356434

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

vue transition 组件

<!-- 使用情况  -->
<!-- v-if v-show 动态组件（路由）件根节点  -->

  
<template>
	<div id="demo">
  	<button v-on:click="show = !show">
   	 Toggle
  	</button>
		<!--  mode 属性 设置过渡模式 
    in-out：新元素先进行过渡，完成之后当前元素过渡离开 
    out-in：当前元素先进行过渡，完成之后新元素过渡进入。
    -->
  	<transition name="fade">
    	<p v-if="show">hello</p>
  	</transition>
	</div>
</template>

<style>
  /* 简单的css transition实现动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

css transition

div {
	transition: <property> <duration> <timing-function> <delay>;
}

# transition 属性规定动画效果 
# property 哪个或哪些 CSS 属性用于过渡  all 则为全部属性
# duration 指定过渡的时长
# timing-function  定义怎么变化   linear、ease
# delay 延时开始

CSS animation

/* 设置延时，即从元素加载完成之后到动画序列开始执行的这段时间 */
animation-delay

/*  设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行 */
animation-direction

/*  设置动画一个周期的时长 */
animation-duration

/*  设置动画重复次数， 可以指定 infinite 无限次重复动画 */
animation-iteration-count

/* 指定由@keyframes 描述的关键帧名称 */
animation-name

/*  允许暂停和恢复动画 */
animation-play-state

/* 设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化 */
animation-timing-function

/* 指定动画执行前后如何为目标元素应用样式 */
animation-fill-mode


/* 简写 */
animation : duration timing-function delay  iteration-count direction fill-mode play-state name

@keyframes 关键帧

@keyframes 名称 {
/*  设置关键帧 */
  0% {
    left: 0;
  }
  25% {
    left: 5%;
  }
  50% {
    left: 0;
  }
  75% {
    left: 5%;
  }
  100% {
    left: 0;
  }
}