网站首页 > 技术文章正文

Vue2之动画（vue实现动画效果的三种方式）

nanyue 2024-10-30 02:57:59 技术文章 5 ℃

一、关于css3的transition属性：

transition:翻译为“过渡”，过渡是一个持续性的动作，因此必须定义一个持续时间。

transition属性：

1.transition-property属性：指定CSS属性的过渡效果，常用于鼠标悬停在一个元素上时指定属性的变化效果；

none：没有属性会获得过渡效果。

all：所有属性都会获得过渡效果，此值为默认值。

<property>：指定属性获得过渡效果，多个属性用逗号分隔，如 width,color

2.transition-duration属性：规定完成过渡效果需要花费的时间（以秒或毫秒计，如： 0.5s），如需要过渡效果，必须指定一个过渡时间，否则过渡效果是不会生效的；

3.transition-timing-function属性：指定切换效果的速度，此属性允许一个过渡效果，以改变其持续时间的速度；

linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease （默认值）规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

4.transition-delay 属性：指定何时将开始切换效果，延迟一段时间后触发过渡（以秒或毫秒计，如： 0.5s），默认为0s。

除了transition-duration属性外，其他都有默认值，如果不需要改变默认值可以不指定，只配置transition-duration属性即可：

transition:0.5s 等价于 transition: all 0.5s ease 0s;

例：针对的是一个标签元素

div{
   width: 100px;
   height: 100px;
   background-color: wheat;
 
   //当div的width属性发生变化时，应用此过渡效果
   transition: width 0.5s ease 0s; 
}
//鼠标指向时div的width属性发生变化
div:hover{
   width:300px;
}
 
<div></div>

二、关于css3的transform属性：

transform 属性：应用于元素的2D或3D转换，这个属性允许你将元素旋转，缩放，移动，倾斜等。

translate(x,y)、translateX(x)、translateY(y)：定义2D转换，x.y单位一般取px，transform：translateX(100px):元素相对原本位置之右100px

div{
  //div相对原来位置在右下100px处
  transform:translate(100px,100px)
}

scale(x,y)、scaleX(x)、scaleY(y)，在2D上旋转绽放

rotate(x,y)、rotateX(x)、rotateY(y)，在2D上旋转

skew(x,y)、skewX(x)、skewY(y)，在2D上倾斜

三、关于Vue的过渡动画

开启vue过渡动画，只需要将需要开启的标签放到<transition>中，同时标签使用v-if控制显示和隐藏。

<input type="button" value="点击" @click="isShow=!isShow" >
<transition>
    <p v-show="isShow">{{msg}}</p>
</transition>

vue的过渡进程图：针对的是类名

进入前、进入后、离开前、离开后，四个状态是一个点，而v-enter-active v-leave-active是一个持续的状态，因此，active中需要标明持续的时间，

v-enter、v-enter-to、v-leave、v-leave-to：需要定义四个状态点的属性：

.v-enter-active,
.v-leave-active {
   //过渡持续时间0.6秒
   transition:  0.6s;
}
 
.v-enter,
.v-leave-to {
     //进入前、离开后，完全透明
     opacity: 0;
     //进入前，离开后，元素相对位置在下边100px处
     transform:translateY(100px);
}
 
.v-enter-to,
.v-leave {
   //进入后、离开前，完全不透明
    opacity: 1;
}

四、自定义前缀

当在<transition name="fade">指定了name属性，就可以使用前缀 .fade-enter 这样。

五、使用第三方animate.css来实现动画

1.引入animate.css

<link ref="stylesheet" href="animate.css">

2.在<transition>中增加enter-active-class和leave-active-class，类名可以通过官方网站复制

官方网站：https: //animate.style/

<input type="button" value="点击" @click="isShow=!isShow" >
<transition  enter-active-class="animate__bounceIn" leave-active-lass="animate__bounceOut">
    <p v-show="isShow" id="p">{{msg}}</p>
</transition>

六、列表动画演示

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <style>
        input:hover{
            background-color: lightgray;
            transition:0.6s
        }
        li{
            list-style:none;
            border:1px solid burlywood;
            margin: 10px ;
            width: 500px;
        }
        li:hover{
            /*鼠标指向时背景色显示并加过渡动画*/
            background-color: wheat;
            transition:0.6s
        }
        /*进入前，离开后的透明度度和位置*/
        .v-enter,.v-leave-to{
            opacity:0;
            transform:translateX(80px);
        }
        /*进入和离开的过渡状态，时间0.6秒*/
        .v-enter-active,.v-leave-active{
            transition: 0.6s;
        }
        /*v-move和v-leave-active配合使用，使下边的元素飘上来*/
        .v-move{
            transition: 0.6s;
        }
        .v-leave-active{
            position: absolute;
        }
    </style>
</head>
<body>
<div id="app" style="margin-left: 20px;margin-top: 20px">
    <p>此例有载入列表时动画   添加动画  鼠标悬停时有动画  双击列项时有移除动画</p>
    <label>
        id
        <input type="text" v-model="id">
    </label>
    <label>
        name
        <input type="text" v-model="name">
    </label>
    <input type="button" value="添加" @click="add">
    <ul>
        <!--v-for循环的元素需要使用transition-group来包裹-->
        <!--:key值必须-->
        <!--appear  载入时动画效果-->
        <!--tag属性指定transition-group渲染的标签，默认为span-->
        <!--model指定out-in，横向移动时先出后进-->
        <transition-group appear tag="span" model="out-in">
            <li v-for="(item , i) in list" :key="item.id" @dblclick="del(i)">
                {{item.id}}-------{{item.name}}
            </li>
        </transition-group>
    </ul>
</div>
<div></div>
</body>
<script>
    var vm =  new Vue({
        el:"#app",
        data:{
            id:"",
            name:"",
            list:[
                {id:1,name:"张三"},
                {id:2,name:"李四"},
                {id:3,name:"五五"},
            ],
        },
        methods: {
            add(){
                this.list.push({id:this.id,name:this.name});
                this.id = this.name = ""
            },
            //双击删除事件
            del(i){
                this.list.splice(i,1)
            }
        },
    })
</script>
</html>

上一篇：前端css面试题-2（前端css面试题及答案）
下一篇：在Vue3中高级前端是这样给按钮添加loading效果的

网站首页 > 技术文章 正文