|
一、过渡和动画的区别过渡：通常用来表示元素上属性状态的变化。 动画：通常用来表示元素运动的情况。
二、使用Vue实现基础得css过渡与动画
1. 动画/* css */@keyframes leftToRight { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(0); }}.animation { animation: leftToRight 3s;}// jsconst app = Vue.createApp({ data() { return { animate: { animation: true } } }, methods: { handleClick(){ this.animate.animation = !this.animate.animation } }, template: ` <div :class='animate'>hello</div> <button @click='handleClick'>切换</button> `});
2. 过渡/* css */.transition { transition: background-color 3s linear 0s;} .gold { background-color: gold;} .cyan { background-color: cyan;}// jsconst app = Vue.createApp({ data() { return { animate: { transition: true, gold: true, cyan: false } } }, methods: { handleClick() { this.animate.gold = !this.animate.gold; this.animate.cyan = !this.animate.cyan; } }, template: ` <div :class='animate'>hello</div> <button @click='handleClick'>切换</button> `});
以上是通过设置class属性实现的，同样通过设置style属性也可以实现： /* css */.transition { transition: background-color 3s linear 0s;}// jsdata() { return { transition: 'transition', styleObject: { backgroundColor: 'gold' } }},methods: { handleClick() { if(this.styleObject.backgroundColor === 'gold'){ this.styleObject.backgroundColor = 'cyan'; }else{ this.styleObject.backgroundColor = 'gold'; } }},template: ` <div :class='transition' :style='styleObject'>hello</div> <button @click='handleClick'>切换</button>`
1. transition 的基本介绍 |
