Vue 3现实生活中的过渡和微互动( 二 ) _Vue

文章插图
.bounce-enter-active {animation: bounce 0.3s;}.bounce-leave-active {animation: bounce 0.3s reverse;}@keyframes bounce {0% {transform: scale(1);opacity: 0;}60% {transform: scale(1.1);}100% {transform: scale(1);opacity: 1;}}列表添加、删除和洗牌

文章插图

.list-enter-active,.list-leave-active {transition: all 0.3s;}.list-enter-from,.list-leave-to {opacity: 0;transform: scale(0);}/* Shuffle */.list-move {transition: transform 0.6s;}

Modal【Vue 3现实生活中的过渡和微互动】

文章插图

.modal-enter-from {opacity: 0;}.modal-leave-active {opacity: 0;}.modal-enter-from .modal-container,.modal-leave-active .modal-container {-webkit-transform: scale(1.1);transform: scale(1.1);}

卡片动画

文章插图

/* moving */.slideLeft-move {transition: all 0.6s ease-in-out 0.05s;}/* Appearing */.slideLeft-enter-active {transition: all 0.4s ease-out;}/* disappearing */.slideLeft-leave-active {transition: all 0.2s ease-in;position: absolute;z-index: 0;}/* appear at / disappear to */.slideLeft-enter-from,.slideLeft-leave-to {opacity: 0;}

展开/收起动画?

文章插图
.list-enter-active,.list-leave-active {transition: all 0.5s;}.list-enter-from,.list-leave-to {opacity: 0;height: 0;}进阶动画

文章插图

<div class="progress-steps"><div class="progress"><div class="percent" :style="{width: `${ (progress-1) * 30 }%`}"></div></div><div class="steps"><div class="step" v-for="index in 4" @click="setProgress(index)" :key="index" :class="{'selected': progress === index,'completed': progress > index }"></div></div></div>

.container {position: relative;margin-top: 100px;}.progress-steps {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.steps {position: relative;display: flex;justify-content: space-between;width: 200px;}.step {width: 20px;height: 20px;background: #ffffff;border: 2px solid lightgray;border-radius: 50%;transition: all 0.6s;cursor: pointer;}.step.selected {border: 2px solid #42b983;}.step.completed {border: 2px solid #42b983;background: #42b983;border-radius: inherit;}.step.completed:before {font-family: "FontAwesome";color: white;content: "f00c";}.progress {position: absolute;width: 100%;height: 50%;border-bottom: 2px solid lightgray;z-index: -1;}.percent {position: absolute;width: 0;height: 100%;border-bottom: 2px solid #42b983;z-index: 1;transition: width 0.6s;}

导航动画

文章插图
导航动画

This example heavily levarages javascript and the gsap library source code

与Vue 2的区别动画是受 Vue 3 迁移影响的众多功能之一。迁移构建不会将其报告为重大更改，这可能会令人困惑。
旧类如下：

文章插图
正如你所看到的， .v-enter和.v-leave类现在被.v-enter-from和.v-leave-from替换了。此外，控制动画类名的过渡元素props的名称从enter-class和leave-class更改为enter-class-from和leave-class-from 。
总结本文介绍了Vue.js在现实生活中如何实现转换和微交互的例子，以及这些功能是如何提高用户体验的。作者指出， Vue.js是一个灵活的框架，可用于实现各种各样的功能。文章中介绍了一些常见的转换和微交互，如弹出窗口、拖动、下拉刷新等，以及如何使用Vue.js实现这些效果。
文章强调了用户体验的重要性，并提供了一些技巧，如利用动画和颜色来吸引用户的注意力，提高用户的参与度。作者还介绍了一些Vue.js插件和库，如Vue-Router、Vuex和AxIOS ，以及如何使用它们来简化代码和提高效率。
最后，文章提醒读者注意使用这些效果时的注意事项，如避免使用过多的动画和效果，以免降低性能和用户体验。
本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。