如何在 Vue.js 中创建悬停动画

发表于 2022年9 月25日星期日下午 3:32:09

我们使用 CSS3 属性来实现目标。在 Vue.js 中对悬停应用动画效果非常容易。首先，我们创建一个带有文本和图像的简单卡片。然后，当我们悬停该卡片时，图像尺寸将增加但不会散布到卡片之外。所以我们使用 CSS 过渡属性。

此外，我们使用 Vue.js 中的 mouseover 事件在用户悬停特定卡片时应用动画效果。现在让我们开始这个在 Vuejs 中创建悬停动画的例子。

在 Vue.js 中创建悬停动画

要在 Vue.js 中创建悬停动画，请使用 mouseover、mouseout 事件和 selected 属性，这将更改 css3 属性并创建动画。

让我们使用 Vue CLI 安装 Vue.js。如果您之前没有安装过 Vue CLI，请使用以下命令安装它。

第 1 步：安装 Vue.js。

npm install -g @vue/cli
# OR
yarn global add @vue/cli

现在使用以下命令创建一个新的 Vue.js项目。

vue create animation

现在在 src >> App.vue 文件中，添加以下代码来创建卡片。请记住，我们没有使用 Bootstrap 框架，因此我们将从头开始编写 css。

所以，我们已经创建了卡片，但我们需要构建它的样式。因此，在 src >> assets 文件夹中，创建一个名为 style.css 的文件并在其中添加 css 代码。

body {
  background-color: #E1E7E7;
}

.card-row {
  display: flex;
  justify-content: center;
  align-items: center;  
  min-width: 780px;
  width: 100%;
  height: 500px;
}

我们使用 flexbox 进行样式设置，因为它使用起来毫不费力。下一步是设计卡片样式。

第 2 步：设计卡片样式。

在 style.css 文件中编写以下代码。

.card {
  position: relative;
  background-color: #FFFFFF;
  height: 370px;
  width: 240px;
  margin: 10px;
  overflow: hidden;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
}

卡的位置将是相对的。溢出必须隐藏，因为我们不需要在调整大小时将图像显示在卡片之外。

因此，溢出将始终被隐藏。 box-shadow 属性为卡片添加阴影。

第 3 步：设置图像样式。

在 style.css 文件中添加以下代码。

.card-image {
  position: absolute;
  left: -9999px;
  right: -9999px;
  margin: auto;
  height: 220px;
  min-width: 100%;
}

我将左右设置为 -9999px 的主要原因是当我们将图像悬停时，将应用动画效果，因此它应该水平居中图像。因此，位置是绝对的，最小宽度是 100%。

第 4 步：设置页脚样式。

在 style.css 文件中编写以下代码。

.card-footer {
  position: absolute;
  bottom: 0;
  height: 130px;
  padding: 10px 15px;
  font-family: Helvetica;
}
.card-text {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
}
.card-title {
  font-family: Serif;
}
.card-author {
  font-size: 14px;
  color: #BAB096;
}

这几乎是一样的东西。我们为它的样式分配了不同的类。没有什么比这更复杂了。

第五步：添加数据。

我们已经创建了一张卡片，但现在，我们将创建五张卡片。所以我们需要一个数据数组。所以让我们在 App.vue 文件中定义数据。此外，我们必须在 App.vue 文件中导入 style.css 以查看更改。

// App.vue

import './assets/style.css';

export default {
  name: 'app',
  data() {
    return {
      cards: [
        {
         title: 'Gallery', 
         author: 'Walder Frey', 
         image: 'http://www.gstatic.com/webp/gallery/1.webp'
        },
        {
          title: 'Penguin', 
          author: 'Ramsey Bolton', 
          image: 'https://www.gstatic.com/webp/gallery3/2_webp_ll.png'
        },
        {
          title: 'Flower', 
          author: 'Joffrey Baratheon', 
          image: 'https://www.gstatic.com/webp/gallery3/1.png'
        },
         {
          title: 'Flower Pot', 
          author: 'Cersie Lannister', 
          image: 'https://www.fiftyflowers.com/site_files/FiftyFlowers/Image/Product/Make_Your_Own_Centerpiece_Close_Up_350_a425aad8.jpg'
        },
         {
          title: 'Rose', 
          author: 'Roose Bolton', 
          image: 'https://res.cloudinary.com/prestige-gifting/image/fetch/fl_progressive,q_95,e_sharpen:50,w_480/e_saturation:05/https://www.prestigeflowers.co.uk/images/NF4016-130116.jpg'
        }
      ]
    }
  }
}

现在，在我们的模板中，我们可以使用 v-for 指令渲染这些卡片。


  
    
      
      
      
      
        {{card.title}}
        by 
          {{card.author}}

第6步：添加悬停效果。

我正在这里编写整个代码。所以请耐心等待。

首先，我展示了 style.css 文件的完整代码。

body {
    background-color: #E1E7E7;
  }
  
  .card-row {
    display: flex;
    justify-content: center;
    align-items: center;  
    min-width: 780px;
    width: 100%;
    height: 500px;
  }
  
  .card {
    position: relative;
    background-color: #FFFFFF;
    height: 370px;
    width: 240px;
    margin: 10px;
    overflow: hidden;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
  }
  
  .card-image {
    /* center horizontally overflown image */
    position: absolute;
    left: -9999px;
    right: -9999px;
    margin: auto;
  
    height: 220px;
    min-width: 100%;
  
    transition: height 0.3s, opacity 0.3s;
  }
  .card-image.selected {
    height: 410px;
    opacity: 0.3;
  }
  
  .card-footer {
    position: absolute;
    bottom: 0;
    height: 130px;
    padding: 10px 15px;
    font-family: Helvetica;
  }
  .card-text {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
  }
  .card-title {
    font-family: Serif;
  }
  .card-author {
    font-size: 14px;
    color: #BAB096;
    transition: color 0.3s;
  }
  .card-author.selected {
    color: #6a6456;
  }
  .card {
    /* the other rules */
    transition: height 0.3s, box-shadow 0.3s;
  }
  .card:hover {
    height: 410px;
    box-shadow: 20px 20px 40px 0px rgba(0,0,0,0.5);
  }

另外，在 App.vue 文件中编写以下代码。

所以，在这里，我定义了这两个事件。

@鼠标移到
@mouseout

因此，当我们悬停任何图像时，我们会将索引传递给 mouseover 事件中定义的函数。

现在，该函数将该索引分配给选定的属性。

这背后的原因很简单，当用户当时悬停图像时，该图像被选中，我们需要将悬停 css 类应用于该图像。

所以，如果选中的图片有那个索引，我们绑定选中的类，动画效果就会生效。下面的 style.css 代码帮助我们应用动画效果。这是一个简单的 CSS 3 规则。

.card-image {
  /* the other rules */
  transition: height 0.3s, opacity 0.3s;
}
.card-image.selected {
  height: 410px;
  opacity: 0.3;
}

现在，如果您已经编写了 style.css 和 App.vue 文件，请转到浏览器并查看结果。

这就是本教程的内容。

如何在 Vue.js 中创建悬停动画的帖子首先出现在 AppDividend 上。

资讯来源：由0x资讯编译自APPDIVIDEND，版权归作者Krunal所有，未经许可，不得转载