アニメーション用 Prop Class (-ani:xxx) の追加
Los mantenedores suelen responder en 1 día
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Aptitud para principiantes
- 45/100
- Tipo de issue
- Nueva funcionalidad
- Claridad
- Bastante claro
- Estado de actividad
- Estancado
- Stack tecnológico
- css, typescript
- Área
- frontend
Línea de trabajo
Lee cómo se declaran las Prop Classes definidas manualmente existentes como -hov:to:zoom y dónde se encuentran (mira junto a las clases -hov: y al pipeline de generación de props.ts mencionado en el issue). Añade la clase -ani:spin junto con la variable --ani--spin y @keyframes spin siguiendo ese patrón, replicando el fragmento CSS dado en el issue. Listo cuando -ani:spin aplique animation: spin 1s linear infinite en el stylesheet construido y coincida con las convenciones de las clases -hov:; extender más adelante a bounce/pulse.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
概要
ローディングスピナーなどで使える回転アニメーション等を、Prop Class として提供する。
設計方針
命名: -ani:xxx（Prop Class）を採用
u--spin（ユーティリティクラス）と -ani:spin（Prop Class）の2案を検討した結果、-ani:spin を採用する方針。
理由
- 本質は
animationプロパティへの単一プロパティ適用であり、Prop Class の思想に合致する -hov:to:zoom等、モーション系の手動定義 Prop Class の前例がすでにあるu--は複数プロパティを組み合わせた複合 UI パターン（u--cbox,u--snap等）に使われており、単一プロパティの適用には過剰-ani:名前空間によりアニメーションであることが明示的で、拡張もしやすい（-ani:spin,-ani:bounce,-ani:pulse等）
@keyframes の扱い
- Prop Class は通常
props.tsからの自動生成だが、-hov:クラスもすでに手動管理されている -ani:も同様に手動定義の Prop Class として、-hov:と同じカテゴリで管理する
実装イメージ
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.-ani\:spin {
animation: spin 1s linear infinite;
}
タスク
-
-ani:spinクラスの実装 - CSS変数
--ani--spinと@keyframes spinの定義 - 将来的な拡張候補の検討（bounce, pulse, fade 等）
- Lenguaje dominante
- TypeScript
- Estrellas
- 283
- Forks
- 8
- Merge medio
- 6 h 37 min
- PR fusionados (30 d)
- 15
Preparar el entorno
Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de lism-css/core
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
Los mantenedores suelen responder en 1 día
-
将来的に検討
Dificultad 2/5 1-3 horas Aptitud para principiantes 65/100
Los mantenedores suelen responder en 1 día
-
Dificultad 3/5 1-2 días Aptitud para principiantes 55/100
Los mantenedores suelen responder en 1 día
-
Dificultad 5/5 Más de una semana Aptitud para principiantes 35/100
Los mantenedores suelen responder en 1 día
-
Dificultad 5/5 Más de una semana Aptitud para principiantes 35/100
Los mantenedores suelen responder en 1 día
Todos los issues de lism-css/core
Issues similares
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 85/100
Slaymish/HealthAgent#7 ·
-
area: engine topic: math type: bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 80/100
Los mantenedores suelen responder en 1 día
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 70/100
Get-Concord-AI/concord-mcp#310 ·
Los mantenedores suelen responder en 1 día
-
Correct install_claude: 'marketplace add' over a different source is refused, not replaced in placeAbiertotype:bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 80/100
nightgauge/nightgauge#2804 ·
Los mantenedores suelen responder en 1 día