Vue中动画与过渡实战

最新推荐文章于 2024-07-05 08:45:00 发布

蜗牛杨哥

最新推荐文章于 2024-07-05 08:45:00 发布

阅读量224

点赞数

本文链接：https://blog.csdn.net/u014635374/article/details/118968690

版权

fluent-mybatis 阿里关于mybatis框架的增强ORM框架,特酷派

https://gitee.com/fluent-mybatis/fluent-mybatis/wikis/tagPagedEntity?sort_id=4098738

文档： https://gitee.com/fluent-mybatis/fluent-mybatis-docs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中动画与过渡实操</title>
    <link>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <p>什么是过渡和动画</p>
    <button @click="add">随机插入一个数字</button>
    <button @click="remove">随机移除一个数字</button>
    <transition-group name="list" tag="p">
        <span v-for="item in items" :key="item" class="list-item">
            {{item}}
        </span>
    </transition-group>
    <p><img src="images/Image005.png"/></p>
    <hr width="1201"/>
    <p>过渡，简而言之，就是从一个状态向另外一个状态插入值，新的状态替换了旧的状态</p>
    <p>&lt;transition name="fade"&gt;</p>
    <!-- 需要添加过渡的div标签 -->
    <p>&lt;div&gt;&lt;div&gt;</p>
    <p>&lt;transition&gt;</p>
    <p>什么是过渡和动画</p>
    <p>通过&lt;transition&gt;标签搭配CSS动画（如@keyframes）可以实现动画效果。</p>
    <p>动画相比过渡来说，动画可以在一个声明中设置多个状态，例如，可以在动画20%的位置设置一个关键帧</p>
    <p>然后在动画50%的位置设置一个完全不同的状态。另外，&lt;transition&gt;标签还提供了一些钩子函数， </p>
    <p>可以结合JavaScript代码来完成动画效果，具体会在后面进行讲解。</p>
    <p>transition组件</p>
    <p>Vue为&lt;transition&gt;标签内部的元素提供了3个进入过渡的类和3个离开过渡的类，如下表所示：</p>
    <p><img src="images/Image003.png"/></p>
    <hr width="1201"/>
    <p>transition组件 </p>
    <p>上表中6个CSS类名在进入和离开的过渡中切换的存在周期如下图所示</p>
    <p><img src="images/Image004.png"/></p>
    <p>自定义类名 </p>
    <p> Vue中的transition组件允许使用自定义的类名。如果使用自定义类名，则不需要给&lt;transition&gt;标签设置name属性。自定义类名是通过属性来设置的，具体属性如下。</p>
    <p>进入：enter-class、 enter-active-class、 enter-to-class</p>
    <p>离开：leave-class、 leave-active-class、 leave-to-class</p>
    <p>自定义类名</p>
    <p>自定义类名的优先级高于普通类名，所以能够很好地与其他第三方CSS库结合使用。 </p>
    <p>animate.css是一个跨浏览器的CSS3动画库，它内置了很多经典的CSS3动画，使用起来很方便。接下来，我们将通过animate.css动画库来演示自定义类名的使用</p>
    <p>自定义类名</p>
    <p>下载并引入animate.css动画库</p>
    <p>首先从官方网站获取animate.css文件，保存到文件目录中。其次创建html文件，并在文件中引入animate.css文件，示例代码如下。</p>
    <p>&lt;link rel="stylesheet" href="animate.css"&gt;</p>


</div>

</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            items: [1, 2, 3, 4, 5], 	// 定义数字数组
            nextNum: 6				        // 下一个数字从6开始
        },
        methods: {
            randomIndex() {
                return Math.floor(Math.random() * this.items.length)
            },
            // 单击“随机插入一个数字”时触发
            add() {// splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
                this.items.splice(this.randomIndex(), 0, this.nextNum++)
            },
            remove() {		 // 单击“随机移除一个数字”时触发
                this.items.splice(this.randomIndex(), 1)
            }
        }
    });
    Vue.config.productionTip = false; // 关闭console控制台的信息;
    Vue.config.devtools = false; // 关闭devtools提示功能
</script>
<style scoped>
    body {
        padding: 0px;
        margin: 0px;
        border: 0px;
        background-color: #657180;
        text-align: center;
        line-height: 23px;
    }

    /* 数字圆圈样式  border-radius: 50%; 则为一个圆圈*/
    .list-item {
        display: inline-block;
        margin-right: 10px;
        background-color: red;
        border-radius: 50%; /*边框的半径,50% 中心到边框角,为宽高相等*/
        width: 25px;
        height: 25px;
        text-align: center;
        line-height: 25px;
        color: #fff;
    }

    /* 插入或移除元素的过程 */
    .list-enter-active, .list-leave-active {
        transition: all 1s;  /*设置动画事件 1秒完成*/
    }


    /*延Y方向移动*/
    /*透明度*/
    /* 进入--淡出*/
    /*延Y下移30像素*/
    /* 开始插入或移除结束的位置变化 */
    .list-enter, .list-leave-to {
        opacity: 0;
        transform: translateY(30px);
    }
</style>
</html>

效果：