Vue过渡&动画

最新推荐文章于 2023-02-07 18:08:40 发布

小的时候可菜了

最新推荐文章于 2023-02-07 18:08:40 发布

阅读量373

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_30763385/article/details/104829660

版权

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
值 rotate(30deg) 把元素顺时针旋转 30 度。
scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

transform: scale(2,4);	#值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

transition 属性是一个简写属性，用于设置四个过渡属性（默认值：all 0 ease 0）
所有 0秒慢快 0延迟

transition-timing-function：

默认none 0 ease 0 1 normal
无 0秒慢快 0延迟 1次正放

animation:mymove 5s infinite;	/* 从左到右5秒 */
@keyframes mymove
{
   
from {
   left:0px;}
to {
   left:200px;}
}

用于在指定的毫秒数后调用函数或计算表达式 once

console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);

推迟执行的代码必须以字符串的形式，放入setTimeout

如果推迟执行的是函数，则可以直接将函数名

function f(){
   
  console.log(2);
}
setTimeout(f,1000);
// 或者
setTimeout(function (){
   console.log(2)},1000);

在播放动画的时，每隔一定时间就调用函数，方法或对象 Infinity

setInterval(code,millisec[,"lang"])

code	必需。要调用的函数或要执行的代码串。
millisec	必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

<html>
<body>
<input type="text" id="clock" size="55" />
<script language=javascript>
var int=setInterval("clo

关注