使用Vue.js过渡和动画设计更好的UX

最新推荐文章于 2022-11-06 23:13:02 发布

cunjie3951

最新推荐文章于 2022-11-06 23:13:02 发布

阅读量330

点赞数

文章标签： java python vue css html ViewUI

过渡和动画是一种重要的设计模式，其目的是通过使用户界面（UI）更自然和直观来改善用户体验（UX）。

大多数人认为过渡和动画的目的是引起用户的注意，这在一定程度上是正确的。在某些情况下，例如游戏网站，以吸引力和娱乐为先，这是合理的。但是，在大多数网站中，参与应该是次要角色，而任何过渡或动画的主要角色应该是沟通。

这将是本教程的主题。我们将探讨转场和动画如何有效地进行通信，并会在Vue.js的上下文中看到如何使用它们。当然，要应用下面讨论的原理，您可以使用任何其他库或框架（例如React或Angular）或纯CSS过渡和动画。

为什么过渡和动画如此重要？

在现实世界中，事物不仅会突然出现或消失。它们移动平稳，逐渐变化。在房子里，我们看到人们进入或离开房间。在路上，我们看到汽车驶近或驶离。即使以不同的速度，它们的运动也是连续的。因此，要使界面熟悉并易于理解，我们需要在网站和应用程序中模拟这种现实行为的某些方面。

这是转场和动画的角色。它们使状态之间的变化变得平滑。他们以清晰可预测的方式显示和解释发生的情况。在大多数情况下，没有过渡效果，用户会想知道刚发生的事情。

在交互性起着关键作用的现代网站中，如何正确使用这种强大的设计模式的知识至关重要。人眼第一眼看到的就是运动。人脑只喜欢运动。运动引起兴趣并引起注意，但最重要的是它传达了信息。正确的信息将导致正确的行动。因此，正确使用过渡和动画可能是用户进行购买或离开您的网站之间的区别。

什么是转场和动画？

过渡只是事物在两种状态之间移动时发生的变化。第一种状态是起点，第二种状态是终点。就像您打开车窗一样。窗口首先处于关闭状态，当您按下按钮时，它会逐渐过渡到其打开状态。

动画是按逻辑顺序排列的一系列过渡。这意味着我们不仅有起点和终点，而且中间还有几个点。通过过渡，我们只需从A到B，或从B到C，依此类推。例如，对于动画，如果要从A转到E，还需要通过B，C和D。因此，从A到E的整个动画实际上是由四个过渡组成的，给人一种连续运动的错觉。

过渡和动画如何改善用户体验？

过渡和动画改善UX的首要方法是通过通信。就像现实生活中的交流可以改善人际关系一样，在Web开发中，交流也可以改善网站或应用程序的用户体验。

获奖的广播设计师Harry Marks说：

如果您没有故事，那么没有任何图形上的骗术会使它变得有趣。

因此，如果内容为王，故事至关重要，那么关键就是以愉悦而有意义的方式向用户展示该内容。故事将消息传达给用户，并且必须以用户可以理解的方式传递。让我们探索一些例子：

如果物体消失了，用户就会知道它消失了。
如果某个物体消失了，则用户知道该物体已经到达。
如果在单击或悬停鼠标后将图像缩略图放大，则用户会知道缩放的图像是缩略图的大版本。

所有这些过渡和动画都像路标。它们为用户提供了有关期望的线索。这会带来更愉快的用户体验。

还有一些重要的目标，过渡和动画可以帮助我们在应用程序界面中实现。他们帮助我们：

在更改视图时保持上下文
解释发生了什么
显示对象之间的关系
吸引用户注意
改善表现
创造虚拟空间的错觉

在下面的示例中，我们将看到这种情况如何发生，但让我首先向您介绍Vue.js过渡和动画。

Vue.js过渡和动画入门

使用Vue.js过渡和动画很容易。 Vue.js提供了一个<transition>组件，用于包装要设置动画的元素或组件。它会自动添加三个进入和三个离开CSS类。

当启用或插入组件时， v-enter ， v-enter-active和v-enter-to负责enter转换。

当禁用或删除组件时， v-leave ， v-leave-active和v-leave-to负责请假过渡。

v-enter / v-leave和v-enter-to / v-leave-to定义过渡的开始和结束状态。 v-enter-active / v-leave-active定义过渡的配置，例如持续时间，缓动功能等。

<transition>组件可以具有name属性。如果我们定义一个，它将替换所有类中的默认v-前缀。例如，如果名称设置为“ menu”，则v-enter类将变为menu-enter ，依此类推。

现在，让我们继续下一部分，看看如何在实践中使用所有这些。

Vue.js过渡和动画用例

接下来是一系列用例，这些用例将说明Vue.js中过渡和动画的实际应用。

注意：为简洁起见，示例中未显示与Vue.js无关CSS代码。要查看完整的代码，请在每个示例末尾单击指向CodePen的链接。

用例1：下拉菜单

在第一个示例中，我们有一个不错的下拉菜单，该菜单在鼠标悬停时打开。问题是，这种情况发生得太快，这会分散用户的注意力并且给用户带来不便。为了使打开状态和关闭状态之间的更改更加平滑自然，我们将使用CSS过渡。这通过解释刚刚发生的事情来帮助用户，因此他们可以清楚地看到下拉按钮和菜单本身之间的联系。

让我们看看实际情况。首先，我们创建HTML模板：

<div id="app">
  <ul class="navbar">
    <li><a href="#home">Home</a></li>
    <li><a href="#products">Products</a></li>
    <li class="dropdown">
      <button class="dropbtn" @mouseover="show = true" @mouseout="show = false">Dropdown 
        <i class="down-arrow"></i>
      </button>
      <transition name="dropdown">
        <ul class="dropdown-content" v-if="show" @mouseover="show = true" @mouseout="show = false">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
       </ul>
     </transition>
    </li> 
  </ul> 
</div>

这将创建带有三个按钮的导航栏菜单。第三个按钮将打开一个下拉菜单，该菜单是由<transition>组件包装的无序列表。我们将过渡的name属性设置为dropdown 。当show属性为true ，将显示菜单，反之亦然。

在JavaScript部分中，我们创建一个新的Vue实例，并将show属性初始设置为false 。因此菜单将一直隐藏，直到我们将鼠标悬停在它上面。

new Vue({
  el: '#app',
  data: {
    show: false
  }
})

接下来，我们使用Vue创建的过渡类来应用所需CSS过渡：

...

.dropdown-enter,
.dropdown-leave-to {
  transform: scaleY(0.7);
  opacity: 0;
}

.dropdown-enter-to,
.dropdown-leave {
  opacity: 1;
  transform: scaleY(1);
}

.dropdown-enter-active,
.dropdown-leave-active {
  transition: all 0.3s ease-out;
  transform-origin: top center;
}

在第一个CSS声明中，我们使菜单透明，并在enter转换开始和离开转换结束时稍微缩小菜单。

在可见状态下，我们使其完全不透明并按比例缩放为其正常尺寸。在最后一个声明中，我们设置过渡的设置。它会持续0.3秒，将有ease-out应用缓和功能。此外，我们将transform-origin设置为top center因此菜单将开始显示在下拉按钮的正下方，并具有良好的向下滚动效果。

用例2：翻转表格

在第二个示例中，我们有两种形式。一种用于允许用户登录，而另一种则允许用户创建新的配置文件。通过加载新页面从一种形式转到另一种形式可能会中断用户流程。因此，我们将使用翻转转换，因此两种形式之间的切换将既流畅又简单。这将有助于在更改视图时保持上下文，使用户流程流畅且连续。

这是模板代码：

<div id="app">
  <transition name="card" mode="out-in">
    <div class="card" v-if="front == true" key="front">
      <h2>Sign In</h2>
      <div class="form">
        <h1>Sign In Form</h1>
      </div>
      <div class="footer">
        <span>Not a member?</span>
        <button @click="front = false">
          Join Us
        </button>
      </div>
    </div>
    <div class="card" v-else key="back">
      <h2>Sign Up</h2>
      <div class="form">
        <h1>Sign Up Form</h1>
      </div>
      <div class="footer">
        <span>Already a member?</span>
        <button @click="front = true">
          Log In
        </button>
      </div>
    </div>
  </transition>
</div>

在这里，我们要在两个元素之间转换：登录和注册表单。因为我们要在具有相同标签名称的元素之间切换（我们用<div>标签包装两种形式），所以它们必须具有唯一的键属性。否则，Vue将仅替换元素的内容。

另外，由于默认情况下进入和离开同时发生，因此我们需要使用mode属性。我们将其设置为out-in ，因此当前元素将首先移出，然后在完成时将另一个元素移入。

在脚本部分，我们将front属性设置为true 。因此，登录表单将首先显示：

new Vue({
  el: '#app',
  data: {
    front: true
  }
})

现在让我们转到CSS代码：

...

.card-enter, .card-leave-to {
  opacity: 0;
  transform: rotateY(90deg);
}

.card-enter-active, .card-leave-active {
  transition: all 0.5s;
}

我们使表单透明，并在进入转换开始和离开转换结束时旋转90度。然后，将过渡的持续时间设置为0.5秒。

用例3：模态窗口

在第三个示例中，我们使用模式窗口向用户显示其他信息。但是模态突然出现并消失，并与背景融合。为了解决该问题，我们将使用过渡，以便在打开或关闭模态时可以将其放大和平滑缩小。另外，我们将使背景变暗，同时保持模态明亮以创建更多对比度。这将以自然的方式吸引用户的注意力。

让我们再次从模板开始：

<div id="app">
  <div v-bind:class="[isShowing ? blurClass : '', clearClass]">
    <p>Lorem ipsum dolor sit amet...</p>
    <button @click="toggleShow">Say Hello</button>
  </div>
  <transition enter-active-class="animated zoomIn"
    leave-active-class="animated zoomOut">
    <modal v-if="isShowing" class="modal">
      <button @click="toggleShow">Close</button>
    </modal>
  </transition>
</div>

在此示例中，我们使用自定义过渡类。这样，我们可以使用动画库，例如animate.css 。我们将自定义类直接放在<transition>组件中，并使用animate.css库中的类。

在脚本部分，我们首先注册上面模板中使用的模式组件。然后，在Vue实例中，我们设置了几个属性和一个方法，这将帮助我们在可见状态和隐藏状态之间切换，并为每个状态应用不同的类：

Vue.component('modal', {
  template: `<div>
    <h2>Hello Vue!</h2>
      <slot></slot>
   </div>`
})

new Vue({
  el: '#app',
  data() {
    return {
      isShowing: false,
      clearClass: 'clear',
      blurClass: 'blur'
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  }
})

这是CSS类：

...

.clear {
  transition: opacity 1s;
}

.blur {
  filter: blur(1px);
  opacity: 0.5;
}

所述.blur模态被打开时，类被施加，并且.clear当它被关闭类。

用例4：待办事项列表

在最后一个示例中，我们有一个简单的待办事项列表应用程序。效果很好，但是当我们添加或删除项目时，它们会立即被插入和删除。对于添加的内容和删除的内容，用户很容易感到困惑。为了使用户体验更加愉悦和可预测，我们将在插入或删除项目时使用动画。这将显示项目之间的关系，并帮助用户确定自己的方向并了解正在发生的事情。

这是模板：

<div id="app">
  <h4>
    {{ name }}'s To Do List
  </h4>
  <div>
    <input v-model="newItemText" />
    <button v-on:click="addNewTodo">Add</button>
    <button v-on:click="removeTodo">Remove</button>
      <transition-group name="list" tag="ul">
        <li v-for="task in tasks" v-bind:key="task" >{{ task }}</li>
      </transition-group>
  </div>
</div>

在此示例中，我们要为多个项目设置动画，因此我们需要使用<transition-group>组件。与<transition>不同，它呈现一个实际元素。默认情况下为<span> 。但是我们实际上需要一个无序列表，因此我们需要将tag属性设置为ul 。

在脚本部分，我们将一些初始数据放入其中，并创建两个方法来添加和删除列表项：

new Vue({
  el: '#app',
  data: {
    name: "Ivaylo",
    tasks: ['Write my posts', 'Go for a walk', 'Meet my friends', 'Buy fruits'],
    newItemText: ""
  },
  methods: {
    addNewTodo() {
      if (this.newItemText != "") {
        this.tasks.unshift(this.newItemText);
      }
      this.newItemText = "";
    },
    removeTodo() {
      this.tasks.shift();
    },
  },
})

这是CSS类：

...

.list-enter-active {
  animation: add-item 1s;
}

.list-leave-active {
  position: absolute;
  animation: add-item 1s reverse;
}

.list-move {
  transition: transform 1s;
}
@keyframes add-item {
  0% {
    opacity: 0;
    transform: translateX(150px);
  }
  50% {
    opacity: 0.5;
    transform: translateX(-10px) skewX(20deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

在CSS中，我们创建一个add-item动画。我们在回车过渡中使用该动画。在休假过渡中，我们使用相同的动画，但是相反。这遵循交互对称原理。

如果您在此阶段尝试使用该应用程序，则将为这些项目设置动画，但列表本身将仅捕捉到其新位置。为了使其平滑移动，我们需要做两件事：首先在离开过渡中将position设置为absolute ，然后添加Vue特别为列表过渡提供的move类。

过渡和动画的最佳做法

如您所见，转场和动画是与用户交流和互动的有力方法。如果使用正确，它们可以极大地改善用户体验。为了便于记忆，我准备了以下最佳做法列表，用于在您的网站或应用程序中使用过渡和动画。

进行良好过渡的关键是速度的平衡。正确的持续时间因每个单独的用例而异，但是根据经验，过渡应该看起来和感觉很自然-不太快，也不太慢。
快速运动和朝向用户的运动比慢速运动和远离用户的运动更为重要。
避免使人烦恼和分散注意力而不是交流的过渡效果。必须轻柔地引导和引导用户的注意力，不要强行指挥和控制用户的注意力。
通过仅使用过渡来传达接口中的更改，可以避免过度使用过渡。
通常，过渡应该是自反的。如果用户创建了一个对象并将其滑入，则将其删除后应以反向过渡的方式滑出。这说明了相互作用的对称性原理。
为了使过渡更容易发现，您应该将过渡保持在用户关注的区域附近。这也将帮助他们感觉不像广告。

结论

我希望阅读本文后，您可以更好地了解什么是过渡和动画以及如何正确使用它们。您还了解了如何在Vue.js的上下文中将它们应用于网站或应用程序的用户界面，从而使UX变得更好，并使用户感到满意。

这篇文章仅涉及Vue.js过渡和动画的内容。因此，这里有一些有用的链接，可供您进一步探索：

翻译自: https://code.tutsplus.com/tutorials/design-better-ux-with-vuejs-transitions-and-animations--cms-32050

cunjie3951

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用Vue.js过渡和动画设计更好的UX

过渡和动画是一种重要的设计模式，其目的是通过使用户界面（UI）更自然和直观来改善用户体验（UX）。大多数人认为过渡和动画的目的是引起用户的注意，这在一定程度上是正确的。在某些情况下，例如游戏网站，以吸引力和娱乐为先，这是合理的。但是，在大多数网站中，参与应该是次要角色，而任何过渡或动画的主要角色应该是沟通。这将是本教程的主题。我们将探讨转场和动画如何有效地进行通信，并会在Vu...
复制链接

扫一扫