使用Vue实现CSS过渡和动画效果
一、过渡和动画的区别
1、过渡：在CSS3中，使用transition属性来将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另一个属性值”，从而来实现元素变化的效果。
语法：
transition：过渡属性过渡时间过渡方式延迟时间;
说明：
transition是一个复合属性，主要包括4个子属性，如下表所示。
transition的子属性
属性说明
transition-property对元素的哪一个属性进行操作
transition-duration过渡的持续时间
transition-timing-function过渡的速率方式
transition-delay过渡的延迟时间（可选参数）
2、动画：在CSS3中，使用animation属性将元素的某一个属性从第1个属性值过渡到第2个属性值，然后还可以继续过渡到第3个属性值...第n个属性值，以此类推，来实现元素动态变化的效果。
语法：
animation：动画名称持续时间动画方式延迟时间动画次数动画方向;
说明：
animation是一个复合属性，主要包括6个子属性，如下表所示。
animation的子属性
属性说明
animation-name对哪一个CSS属性进行操作
animation-duration动画的持续时间
animation-timing-function动画的速率方式
animation-delay动画的延迟时间
animation-iteration-count动画的播放次数
animation-direction动画的播放方向，正向还是反向
3、区别：transition属性（即CSS3过渡）只能实现一次性的动画效果，而animation属性（即CSS3动画）可以实现连续性的动画效果。
二、使用Vue实现基础的CSS过渡效果
1、通过控制dom元素的class类名变化来实现
<style>
/*过渡效果*/
.transition{
transition:3s all ease;
}
/*类名为blue时，文字颜为绿，位置不变*/
.blue{
color:aqua;
transform:translateX(0px);
}
/*类名为pink时，文字颜变为粉，沿X轴向右移动100px*/
.pink{
color:pink;
transform:translateX(100px);
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script>
//通过改变class值来实现文字位置和背景颜过渡效果
const ateApp({
data(){
return{
//animate中包含了要绑定给dom元素class的数据
animate:{
transition:true,
blue:true,
pink:false
}
}
},
methods:{
//事件发生后，对blue/pink数据的值取反
handleClick(){
this.animate.blue=!this.animate.blue;
this.animate.pink=!this.animate.pink;
}
},
//将animate通过v-bind绑定给div元素，数据值为true，则该数据会在class 中显示
//给button按钮添加点击事件，事件方法为handleClick
template:`
<div:class="animate">hello world</div>
<button@click="handleClick">切换</button>`
});
const unt("#root");
</script>
2、通过控制dom元素的style来实现
<style>
/*给元素添加过渡效果*/
.transition{
transition:3s color ease;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script>
const ateApp({
data(){
return{
//在styleObj中保存元素的样式（style）数据
styleObj:{
color:"blue"
}
}
},
methods:{
/
/事件触发后，color的值如果是blue，则会变为pink，如果不是则变为blue handleClick(){
if(lor==="blue")
{lor="pink"}
else{lor="blue"}
}
},
//将styleObj绑定给元素的样式属性style，这样当styleObj中数据变化时，style 内容也会变化，元素样式也会变化
template:`
<div class="transition":>hello world</div>
<button@click="handleClick">切换</button>`
});
const unt("#root");
</script>
三、使用Vue实现基础的CSS动画效果
<style>
/*动画内容*/
@keyframes move{
0%{transform:translateX(-100px);}
50%{transform:translateX(-50px);}
100%{transform:translateX(0px);}
}
.animation{
animation:move3s;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script>
const ateApp({
data(){
js控制css3动画触发
return{
animate:{
animation:true
}
}
},
methods:{
handleClick(){
this.animate.animation=!this.animate.animation;
}
},
template:`<div:class="animate">hello world</div>
<button@click="handleClick">切换</button>`
});
const unt("#root");
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。