vue动画

最新推荐文章于 2022-01-13 00:16:03 发布

l2461821849

最新推荐文章于 2022-01-13 00:16:03 发布

阅读量46

点赞数

本文链接：https://blog.csdn.net/l2461821849/article/details/108738962

版权

Vue.js

文章目录

Vue.js
- 动画

动画

在 vue 中给组件或元素添加动画的方式可以分为多种，但总体无非还是通过 css 和 JavaScript 来进行处理

CSS

通过 css 添加动画的方式特别的简单，只需要利用 css 中的 transition 就可以做到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .js_animation_box {
            width: 100px;
            height: 100px;
            background: red;
            transition: .5s all;
        }
        .js_animation_box.end {
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <button id="js_animation_btn">原生动画</button>
    <div id="js_animation_box" class="js_animation_box"></div>
    <script>
        // 原生 + css
        let jsAnimationBtn = document.querySelector('#js_animation_btn');
        let jsAnimationBox = document.querySelector('#js_animation_box');

        jsAnimationBtn.onclick = function() {
            jsAnimationBox.classList.add('end');
        }
    </script>
</body>
</html>

JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .js_animation_box {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <button id="js_animation_btn">原生动画</button>
    <div id="js_animation_box" class="js_animation_box"></div>
  	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
				// jq
        $('#js_animation_btn').on('click', function() {
            $('#js_animation_box').animate({
                width: 200,
                height: 200
            }, .5);
        });
    </script>
</body>
</html>

vue 中的动画处理

在 vue 中基本和上面的处理方式是一样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .js_animation_box {
            width: 100px;
            height: 100px;
            background: red;
            transition: .5s all;
        }
        .js_animation_box.end {
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="isEnd = !isEnd">vue动画</button>
        <div :class="['js_animation_box', isEnd ? 'end' : '']"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                isEnd: false
            }
        });
    </script>
</body>
</html>

动画生命周期

vue 为元素和组件的几个特殊的情况提供了对应的处理方式

条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点

transition 组件

通过 transition 组件包裹的元素或组件，会在上面定义的几个场景中触发过渡，并添加指定的 class 样式

过渡类名

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除
`v-leave-

List item

active`：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数

v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wUXwvYuX-1600773663489)(assets/transition.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .js_animation_box {
            width: 100px;
            height: 100px;
            background: red;
        }

        .slide-fade-enter-active, .slide-fade-leave-active {
            transition: all 5s ease;
        }
        .slide-fade-enter {
            width: 0;
            height: 0;
        }
        .slide-fade-enter-to {
            width: 100px;
            height: 100px;
        }
        .slide-fade-leave {
          	/*可以和slide-fade-enter-to合并*/
            width: 100px;
            height: 100px;
        }
        .slide-fade-leave-to {
          	/*可以和slide-fade-enter合并*/
            width: 0;
            height: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="isShow = !isShow">vue动画</button>
        <transition name="slide-fade">
            <div v-if="isShow" class="js_animation_box"></div>
        </transition>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                isShow: false
            }
        });
    </script>
</body>
</html>

l2461821849

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue动画

Vue.js文章目录Vue.js动画CSSJavaScriptvue 中的动画处理动画生命周期transition 组件过渡类名动画在 vue 中给组件或元素添加动画的方式可以分为多种，但总体无非还是通过 css 和 JavaScript 来进行处理CSS通过 css 添加动画的方式特别的简单，只需要利用 css 中的 transition 就可以做到<!DOCTYPE html><html lang="en"><head> <meta ch
复制链接

扫一扫