likes
comments
collection
share

网页设计中CSS 动态效果实现，过渡（Transition）和 动画（Animation）的介绍

作者站长头像
站长
· 阅读数 21

前言

CSS 动态效果是网页设计中非常关键的一部分，它能够提升用户体验，使网页看起来更加生动和吸引人。两种实现方式是 CSS 过渡（Transition）和 CSS 动画（Animation）。下面将分别介绍这两种技术的基本用法。

1. CSS Transition

CSS 过渡是一种在两个状态之间平滑切换的技术，通常用于简单的动态效果，比如按钮的悬停状态、元素的显示和隐藏等。以下是使用 CSS 过渡的基本步骤：

  • 定义初始状态：设置元素的初始样式。
  • 定义目标状态：设置元素在特定动作（如 hover、focus 等）触发后的目标样式。
  • 设置过渡属性：使用 transition 属性指定哪些样式将发生过渡，以及过渡的持续时间和效果。

2. CSS Animation

CSS 动画比过渡更为强大，它允许你创建更复杂的动画效果，可以包含多个步骤和关键帧。以下是使用 CSS 动画的基本步骤：

  • 定义动画序列：使用 @keyframes 规则定义动画的各个阶段。
  • 应用动画：将动画应用到元素上，设置动画的名称、持续时间、迭代次数等。

这两种技术各有优势，CSS 过渡适合简单的效果，而 CSS 动画则适合更复杂的动画场景。根据你的项目需求选择合适的技术来实现动态效果。

正文

网页设计中CSS 动态效果实现，过渡（Transition）和 动画（Animation）的介绍 App.vue

<template>
  <div class="page">
    <div class="card">
      <div class="card__header">
        <h3 class="card-title">{{ name }}</h3>
        <div class="card-subtitle">Transision & Animation</div>
      </div>
      <div class="card__content">
        <div :class="['emoji',{hidden:!isActive}]">🐶</div>
      </div>
      <div class="card__action">
        <button type="button" @click="isActive = !isActive" >请按这里</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const name = ' Animation'
const isActive = ref(false)

</script>

<style lang="css" scoped>
@import './style/app.css';
@import './style/card.css';

</style>

card.css

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 300px;
    box-sizing: border-box;
    padding: 32px;
    margin: 0 auto;
    background: #f8f8f8;
    border-radius: 10px;
  }
  
  .card__header {
    text-align: center;
    margin-bottom: 32px;
  }
  
  .card-title {
    margin-bottom: 8px;
  }
  
  .card-subtitle {
    font-size: 12px;
    color: #989898;
  }
  
  .card__content {
    min-height: 250px;
  }
  
  .card__action > button {
    outline: none;
    border: none;
    background: none;
    border: 2px solid #000;
    padding: 10px 24px;
    cursor: pointer;
    margin: 4px;
  }
  
  .card__action > button:active {
    opacity: 0.8;
  }

app.css

input[type='text'],
textarea,
select {
  padding: 4px 8px;
  margin: 8px 0;
  margin-right: 8px;
  font-size: 16px;
}

label {
  margin-left: 4px;
}
.page {
  padding: 32px;
  margin: 32px;
}

.emoji {
  font-size: 100px;
  transition: 0.3s;
}

.hidden {
  opacity: 0;
  transform: translateX(30px);
}

css transition 切换类名实现

.emoji { font-size: 100px; transition: 0.3s; }

定义了一个名为 .emoji 的CSS类，它为应用了这个类的元素设置了两个样式属性：

  1. font-size: 100px; 这将字体大小设置为100像素，适用于显示较大的文字或表情符号（emoji）。
  2. transition: 0.3s; 这为元素的属性变化添加了一个过渡效果，持续时间为0.3秒。这意味着当字体大小或其他属性发生变化时，它们会平滑地过渡而不是突变。
<div :class="['emoji',{hidden:!isActive}]">🐶</div>
  • emoji 类被直接绑定到了这个元素上，这意味着无论条件如何，emoji 类都会应用到这个元素上。
  • hidden 类则是条件性绑定的，其条件是 !isActive 的值。如果 isActive 是 true，那么 hidden 类将不会应用到这个元素上，反之，如果 isActive 是 false，那么 hidden 类将被应用。
.hidden { opacity: 0; transform: translateX(30px); }

在某些交互发生时显示或隐藏元素，可以使用JavaScript来改变这个类的样式属性值。

css animation

更改类名.hidden更为.pulse

在App.vue中引入新css样式

@import './style/animation.css';

animation.css

.pulse{
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count:infinite;
}
/* css 性能优化 GPU加速 动画不要影响周围的文档流*/
@keyframes pulse{
    from{
        transform: scale3d(1);
    }
    50%{
        transform: scale3d(1.5,1.5,1.5);
    }
    to{
        transform: scale3d(1,1,1);
    }
}

这段CSS代码定义了一个名为.pulse的类，用于实现一个动画效果。通过animation-name指定动画的名称为pulse，animation-duration指定了动画的持续时间为1秒，animation-iteration-count指定了动画无限循环播放。

在@keyframes中定义了动画的关键帧，从初始状态from到中间状态50%，再���结束状态to，通过改变元素的transform属性实现缩放效果。具体来说，元素先在X、Y、Z三个维度上同时放大1.5倍，然后恢复到原始大小。这个动画通过GPU加速，可以提高性能并减少对周围文档流的影响。

如果要更细致的定制效果，添加一些内置的类似生命周期的钩子类名

vue提供了transition 类名

<transition>
  <div v-if="isActive" class="emoji">🐶</div>
</transition>

v-if/v-show 切换组件/html片段效果，动画，内置组件transition 更好的服务于动画定制

  • .v-enter-from（开始） .v-enter-active（进行中） .v-enter-to（结束）
  • .v-leave-from（开始） .v-leave-active（进行中） .v-leave-to（结束）
/* 进入时 */
.v-enter-from{
    opacity: 0;
}
.v-enter-active{
    transition: 3s;
}
.v-leave-to{
    opacity: 1;
}
/* 离开时 */
.v-leave-from{
    opacity: 1;
}
.v-leave-active{
    transition: 3s;
}
.v-leave-to{
    opacity: 0;
}

如果想定制呢？ name="slide"

App.vue中更改

<transition name="slide">
 <div v-if="isActive" class="emoji">🐶</div>
</transition>

app.css中增加

.slide-enter-from{
    opacity: 0;
    transform: translateX(30px);
}
.slide-enter-active{
    transition: 2s;
}
.slide-enter-to{
    opacity: 1;
}

.slide-leave-from{
    opacity: 1;
}
.slide-leave-active{
    transition: 2s;
}
.slide-leave-to{
    opacity: 0;
    transform: translateX(-30px);
}

animation 只需要定制enter-active leave-active 即可

<transition name="pulse">
 <div v-if="isActive" class="emoji">🐶</div>
</transition>

app.css中更改为

.pulse-enter-active{
    animation: pulse 1s;
}

.pulse-leave-active{
    animation: pulse 1s;
}

上专业的动画库，比如animate.css

  • transition 支持 class 特性 animate-tada

Animate.css | A cross-browser library of CSS animations.

animate.css使用中文文档非官方文档 – 齐全的CSS3动画库 - animate镜像站点 (5kzx.cn)

网页设计中CSS 动态效果实现，过渡（Transition）和 动画（Animation）的介绍

enter-active-class="animate__animated animate__infinite" leave-active-class="animate__animated animate__infinite"

<transition class="animate__tada"
  enter-active-class="animate__animated animate__shakeY"
  leave-active-class="animate__animated animate__shakeY"
>
   <div v-if="isActive" class="emoji">🐶</div>
</transition>

总结

动态效果

1、 css transition 切换类名实现

2、css animation

3、如果要更细致的定制效果，添加一些内置的类似生命周期的钩子类名

3.1、vue提供了transition 类名 v-if/v-show 切换组件/html片段效果，动画，内置组件transition 更好的服务于动画定制 .v-enter-from（开始） .v-enter-active（进行中） .v-enter-to（结束） .v-leave-from（开始） .v-leave-active（进行中） .v-leave-to（结束） - 如果想定制呢？ name="slide"

3.2、animation 只需要定制enter-active leave-active 即可

4、上专业的动画库，比如animate.css - transition 支持 class 特性 animate-tada enter-active-class="animate__animated animate__infinite" leave-active-class="animate__animated animate__infinite"

转载自:https://juejin.cn/post/7393311009760444435
评论
请登录