欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-25 12:42:52
...

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>
        `,

})

 

相关标签: Vue