选择事件改变时，CSS动画触发相应效果

Question

我正在尝试制作一个React应用程序，现在我有一个选择输入框，里面有一些宝可梦，我需要做的是每当选择改变（即宝可梦改变）时，宝可梦精灵会进行一个小的摇晃动画。目前我只有一个改变的精灵和一个在选择值改变时播放的音频。我该如何实现这个功能？我已经尝试使用的onChange和styled-components来改变它的样式，但无法使其工作，动画只在页面加载时触发。这是我目前的代码：

Select.ts：

import { closest } from "fastest-levenshtein";
import React, { useState } from "react";
import { cries, pokemons } from "../data";
import styled from "styled-components";
import { Img, ani } from "../styles";

function Select() {
  const [src, setSrc] = useState(require("../data/sprites/bulbasaur.png"));
  const opts: { label: string; value: string }[] = [];
  for (let i = 0; i < pokemons.length; i++) {
    opts.push({
      label: pokemons[i][0].toUpperCase() + pokemons[i].slice(1),
      value: pokemons[i],
    });
  }
  return (
    <div>
      <div>
        <select
          onChange={(evt) => {
            setSrc(require(`../data/sprites/${evt.target.value}.png`));
            const str = closest(evt.target.value, cries);
            const res = new Audio(require(`../data/cries/${str}`));
            res.volume = 0.2;
            res.play();
            styled(Img)`
              margin-left: 2.5em;
              animation: ${ani};
            `;
          }}
        >
          {opts.map(({ label, value }) => (
            <option key={value} label={label} value={value}></option>
          ))}
        </select>
      </div>
      <Img src={src} alt="" className="sprite" />
    </div>
  );
}

export default Select;

img.styled.ts：

import styled, { css } from "styled-components";
import { shake } from "./shake.stiled";

const ani = css(["", " 0.3s linear"] as any as TemplateStringsArray, shake);
const Img = styled.img`
  margin-left: 2.5em;
  animation: ${ani};
`;

export { Img, ani };

谢谢！

1

0

0

P粉200138510

回复

全部回复(1)

我来回复 关闭

P粉9905682832024-04-02 00:10:18 1 楼

我相信，将src状态放在父组件中，通过将setSrc作为prop传递给该组件，而不是在此组件中声明src状态，将有助于您。所以在这个组件中，onChange={() => setSrc(newVal)}，其中setSrc作为prop传递给了Select组件。

或者，我建议将evt.target.value存储为一个状态，并在onChange事件中更新该值。

const [chosenImg, setChosenImg] = useState()
const [src, setSrc] = useState(require("../data/sprites/bulbasaur.png"));

useEffect(() => {
setSrc(require(`../data/sprites/${chosenImg}.png`))

}, [chosenImg]);

然后：

onChange={()=> setChosenImg(evt.target.value)}

点赞 +0

添加回复 关闭回复

P粉200138510

回复

热门专题

更多>

• CakePHP 教程
• Laravel 教程
• PHP教程
• Java教程

热门文章

• The Royal Mint and RNLI join forces to celebrate 200 years of lifesaving
• Bitgert vs Neiro vs Floki Inu – The Better Investment in 2024?
• 三国战争策略手游怎么办才能玩 三国战争游戏新手指南及技巧
• 吟游战记科技树怎么点 吟游战记如何点亮科技树
• How To Transfer Files and Programs to a New Computer: 4 Easy Options

热门教程

更多>

相关教程

热门推荐

最新课程

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1404018
• 
  php入门教程之一周学会PHP

  4232953
• 
  JAVA 初级入门视频教程

  2424419

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1404018
• 
  JAVA 初级入门视频教程

  2424419
• 
  小甲鱼零基础入门学习Python视频教程

  498671
• 
  Web前端开发极速入门

  214244
• 
  零基础精通 PS 视频教程

  860888

• 
  【web前端】Node.js快速入门

  4796
• 
  国外Web开发全栈课程全集

  3714
• 
  Go语言实战之 GraphQL

  3194
• 
  550W粉丝大佬手把手从零学JavaScript

  566
• 
  python大神Mosh，零基础小白6小时完全入门

  16360

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

• [表单按钮] jQuery企业留言表单联系代码
• [播放器特效] HTML5 MP3音乐盒播放特效
• [菜单导航] HTML5炫酷粒子动画导航菜单特效
• [表单按钮] jQuery可视化表单拖拽编辑代码
• [播放器特效] VUE.JS仿酷狗音乐播放器代码
• [html5特效] 经典html5推箱子小游戏
• [图片特效] jQuery滚动添加或减少图片特效
• [相册特效] CSS3个人相册封面悬停放大特效

• [Bootstrap模板] 有机果蔬供应商网页模板 Bootstrap5
• [后端模板] Bootstrap3多功能数据信息后台管理响应式网页模板-Novus
• [Bootstrap模板] 房产资源服务平台网页模板 Bootstrap5
• [Bootstrap模板] 简约简历资料网页模板 Bootstrap4
• [Bootstrap模板] bootstrap响应式宽屏图书教育网站模板-DREAMLIFE
• [后端模板] MAC风格响应式蓝色企业CMS后台管理系统模版
• [后端模板] 响应式渐变大气后台管理系统网站模板-usinessbox
• [Bootstrap模板] 响应式蔬菜水果商店网站模板-Organio

• [PNG素材] 可爱的夏天元素矢量素材(EPS+PNG)
• [PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)
• [banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)
• [PNG素材] 金色的毕业帽矢量素材(EPS+PNG)
• [PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG)
• [PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)
• [banner图] 扁平风格的植树节banner矢量素材(AI+EPS)
• [PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)

• [前端模板] 家居装潢清洁维修服务公司网站模板
• [前端模板] 清新配色个人求职简历引导页模板
• [前端模板] 设计师创意求职简历网页模板
• [前端模板] 现代工程建筑公司网站模板
• [前端模板] 教育服务机构响应式HTML5模板
• [前端模板] 网上电子书店商城网站模板
• [前端模板] IT技术解决互联网公司网站模板
• [前端模板] 紫色风格外汇交易服务网站模板

关于我们 免责声明 Sitemap

PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！

Answer 1

我相信，将src状态放在父组件中，通过将setSrc作为prop传递给该组件，而不是在此组件中声明src状态，将有助于您。所以在这个组件中，onChange={() => setSrc(newVal)}，其中setSrc作为prop传递给了Select组件。

或者，我建议将evt.target.value存储为一个状态，并在onChange事件中更新该值。

const [chosenImg, setChosenImg] = useState()
const [src, setSrc] = useState(require("../data/sprites/bulbasaur.png"));

useEffect(() => {
setSrc(require(`../data/sprites/${chosenImg}.png`))

}, [chosenImg]);

然后：

onChange={()=> setChosenImg(evt.target.value)}