Vue 学习笔记二 动画

简介: Vue 学习笔记二 动画

1. CSS动画原理


image.png



CSS:


<style type="text/css">
.fade-enter{
    opacity: 0;
}
.fade-enter-active{
    transition: opacity 1s;
}
.fade-leave-to{
    opacity: 0;
}
.fade-leave-active{
    transition: opacity 1s;
}
</style>


HTML:


<transition name="fade">
       <div v-if="show">hello world</div>
 </transition>

或:


<transition-group>
       <div v-for="(item,index) in list" :key="item.id">{{item.title}}</div>
</transition-group>

css 中的每个开头都以 fade 开头,原因是因为给 transition 的 name 属性为 fade。 如果不写默认开头为 v(例如:.v-enter)最终效果如下:


CSS:


<style type="text/css">
.v-enter, .v-leave-to{
    opacity: 0;
}
.v-enter-active, .v-leave-active{
    transition: opacity 1s;
}
</style>

HTML:


<body>
    <div id="root">
        <transition>
            <div v-if="show">hello world</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true
            },    
            methods: {
                handleClick: function() {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>

2. CSS动画使用

CSS:


<style type="text/css">
@keyframes bounce-in {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}
.active{
    transform-origin: left center;
    animation: bounce-in 1s;
}
.leave{
    transform-origin: left center;
    animation: bounce-in 1s reverse;
}
</style>


HTML:


<body>
    <div id="root">
          <transition 
                name="fade" 
                enter-active-class="active" 
                leave-active-class="leave" >
                    <div v-if="show">hello world</div>
          </transition>
          <button @click="handleClick">切换</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true
            },
            methods: {
                handleClick: function() {
                      this.show = !this.show
                }
            }
         })
    </script>
</body>

3. Animate动画的使用

Animate.css官网

Animate 所提供的动画其实是 @keyframes 动画,是属于CSS3的。

<link rel="stylesheet" type="text/css" href="../animate.css">

导入 animate.css ,使用时注意,必须实现 enter-active-class 与 leave-active-class 且包含 animated 字段, animated 字段后面才是动画效果,动画效果可在官网中选取(例如:enter-active-class="animated 动画效果")固定写法。


<body>
    <div id="root">
          <transition 
                name="fade" enter-active-class="animated swing" 
                leave-active-class="animated shake" >
                     <div v-if="show">hello world</div>
          </transition>
          <button @click="handleClick">切换</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true
            },
            methods: {
                handleClick: function() {
                      this.show = !this.show
                }
            }
         })
    </script>
</body>


上面这个动画呢有个缺点就是在首次显示(也就是页面刚出现的时候)的时候没有动画效果,如果想要一开始就带有动画效果则需要下面的 appear 书写方式:


<body>
    <div id="root">
          <transition 
                name="fade" appear enter-active-class="animated swing" 
                leave-active-class="animated shake"  
                appear-active-class="animated swing">
                     <div v-if="show">hello world</div>
          </transition>
          <button @click="handleClick">切换</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true
            },
            methods: {
                handleClick: function() {
                      this.show = !this.show
                }
            }
         })
    </script>
</body>

3. Animate(@keyframes)动画 与 过渡动画(transition)效果结合

两者动画结合只需要在 enter-active-class 与 leave-active-class 后面加上过渡动画类型即可,但是两者动画时间可能会不一致,那么:


  1. 可以通过 type="transition" 来约束动画以当前的过渡动画时间为准。
  2. :duration="5000" 自定义动画时间5秒
  3. :duration="{enter: 5000, leave: 10000}" 自定义出场动画5秒,离场动画10秒


CSS:


<style type="text/css">
    .fade-enter, .fade-leave-to{
        opacity: 0;
    }
    .fade-enter-active, .fade-leave-active{
        transition: opacity 3s;
    }
</style>

HTML:


<body>
    <div id="root">
          <transition 
              name="fade" 
              :duration="{enter: 5000, leave: 10000}"
              //:duration="5000"
              //type="transition" 
              appear 
              enter-active-class="animated swing fade-enter-active" 
              leave-active-class="animated shake fade-leave-active" 
              appear-active-class="animated swing">
                   <div v-if="show">hello world</div>
          </transition>
          <button @click="handleClick">切换</button>
    </div>
    <script>
          var vm = new Vue({
                el: "#root",
                data: {
                    show: true
                },
                methods: {
                      handleClick: function() {
                          this.show = !this.show
                      }
                }
          })
    </script>
</body>

4. 动画过程回调函数监听

@before-leave: 将要执行离场动画 @leave: 正在执行离场动画 @after-leave: 离场动画执行完成 @before-enter: 将要执行入场动画 @enter: 正在执行入场动画 @after-enter: 入场动画执行完成


<body>
       <div id="root">
          <transition 
              name="fade"
              @before-leave="handleBeforeLeave"
              @leave="handleLeave"
              @after-leave="handleAfterLeave"
              @before-enter="handleBeforeEnter"
              @enter="handleEnter"
              @after-enter="handleAfterEnter">
                  <child v-show="show"></child>
          </transition>
          <button @click="handleClick">切换</button>
        </div>
        <script>
              Vue.component('child', {
                    template: '<div>hello world</div>'
               })
                var vm = new Vue({
                    el: "#root",
                    data:{
                        show: true
                     },
                    methods: {
                        handleClick: function() {
                            this.show = !this.show
                        },
                        handleBeforeEnter: function(el) {
                            el.style.color = 'red';
                        },
                        handleEnter: function(el, done) {
                            setTimeout(() => {
                                el.style.color = 'green'
                            }, 2000);
                            setTimeout(() => {
                                done()
                            }, 4000);
                         },
                         handleAfterEnter: function(el) {
                                el.style.color = '#000'
                         }
                     }
                 })
        </script>
</body>

5. velocity 动画

velocity官网

<script src="../velocity.min.js"></script>

导入完成之后开始使用


<body>
    <div id="root">
        <transition 
            name="fade"
            @before-enter="handleBeforeEnter"
            @enter="handleEnter"
            @after-enter="handleAfterEnter">
                <child v-show="show"></child>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        Vue.component('child', {
            template: '<div>hello world</div>'
        })
        var vm = new Vue({
            el: "#root",
            data:{
                show: true
            },
            methods: {
                handleClick: function() {
                    this.show = !this.show
                },
                handleBeforeEnter: function(el) {
                    el.style.opacity = 0;
                },
                handleEnter: function(el, done) {
                    Velocity(el, {opacity: 1}, {duration: 1000, complete: done})
                },
                handleAfterEnter: function(el) {
                    alert('动画结束')
                }
             }
         })
    </script>
</body>

相关文章
|
10天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
vue学习第四章
|
10天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
vue学习第九章(v-model)
|
10天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
vue学习第十章(组件开发)
|
16天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
16天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
15天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
15天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
16天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
16天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
17天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。