We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS


この翻訳は不完全です。英語から この記事を翻訳 してください。


Example animation using CSS transitions.

HTML コンテンツ

<div class="channel">
  <img src="https://mdn.mozillademos.org/files/11827/developer.png" class="icon"/>
  <span class="note">Firefox Developer Edition</span>

CSS コンテンツ

.channel {
  padding: 2em;
  margin: 0.5em;
  box-shadow: 1px 1px 5px #808080;
  margin: 1.5em;

.channel > * {
  vertical-align: middle;
  line-height: normal;

.icon {
  width: 50px;
  height: 50px;
  filter: grayscale(100%);
  transition: transform 750ms ease-in, filter 750ms ease-in-out;

.note {
  margin-left: 1em;
  font: 1.5em "Open Sans",Arial,sans-serif;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  opacity: 0;
  width: 0;
  transition: opacity 500ms 150ms, width 500ms 150ms;

.icon#selected {
  filter: grayscale(0%);
  transform: scale(1.5);

.icon#selected+span {
  opacity: 1;
  width: 300px;

JavaScript コンテンツ

function toggleSelection(e) {
  if (e.button != 0) {
  if (e.target.classList.contains("icon")) {
    var wasSelected = (e.target.getAttribute("id") == "selected");
    if (!wasSelected) {
      e.target.setAttribute("id", "selected");

function clearSelection() {
  var selected = document.getElementById("selected");
  if (selected) {

document.addEventListener("click", toggleSelection);


このページの貢献者: yyss
最終更新者: yyss,