Vue动画之transition和keyframes关键帧动画

1.实现keyframes关键帧动画效果

利用data控制类名来控制过渡效果。 

<style>

     @keyframes leftToRight {
        0% {
          transform: translateX(-100px);
        }
        50% {
          transform: translateX(-50px);
        }
        100% {
          transform: translateX(0px);
        }
      }
     //给animation类名加上动画效果
      .animation {
        animation: leftToRight 3s;
      } 
</style>

const app = Vue.createApp({

       data(){
             return {
                 animate:{
                    animation:false  
                } 
            },
     methods:{
                handleClick(){
                    //切换动画效果的显示
                    this.animate.animation = this.animate.animation
                }
        },     
      template:`

                <div>
                            //通过对象里面的类名决定是否加载动画效果  
                            <div :class="animate">HelloWorld</div>
                            <div @click="handleClick">切换</div>
                </div>
            `

})

2.实现transition 过渡效果

 利用data控制类名来控制过渡效果。 

 

<style>
    
      .transition {
        transition: 3s background-color ease;
      }
      .blue {
        background: blue;
      }
      .green {
        background: green;
      }

</style>
const app = Vue.createApp({

   data(){
            return {
                    animate:{
                            transition:true,
                            green:true,
                            blue:false
                    }
            }
   },
  methods:{

            handleClick(){
                     //控制data对象中的类名来控制样式
                     this.animate.animation = !this.animate.animation;
                     this.animate.blue = !this.animate.blue;
                     this.animate.green = !this.animate.green;
            }
    },

  template:`
             <div>
                <div :class="animate">
                    hello world
                </div>
                <button @click="handleClick">切换</button>
            </div>
    `

})

 3.通过style来控制transition效果

 

const app = Vue.createApp({

    data(){
        return {
                styleObj: {
                background: "blue",
              },
        }
    },
     methods: {
        handleClick() {
        //手动切换data里面的styleobj的样式 这样不用在<style></style>里面写样式
          if (this.styleObj.background === "blue") {
            this.styleObj.background = "green";
          } else {
            this.styleObj.background = "blue";
          }
        },
      },
        template: `
    
            <div>
                <div :class="transition" :style="styleObj">
                    hello world
                </div>
                <button @click="handleClick">切换</button>
            </div>
        `,

})