为 div 设置动画？正确的选择器？

Question

我有 Div A 和 input 表单。当输入聚焦时，如何实现 Div A 做一些变换动画？是否可以仅使用 CSS？

Answer 1

如果您将 div 放在输入之后，您可以将 :focus 伪选择器与相邻的兄弟选择器 + 组合在一起。像这样：

input:focus + div {
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

如需演示，请查看此JSFiddle

编辑：

要在输入不再处于焦点时将 div 平滑地旋转回其原始位置，您可能需要这样设置：

div {
    -webkit-transform:rotate(0);
    -moz-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

input:focus + div {
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

更新Fiddle。

编辑2

如果 div 放在输入之前，或者中间有很多元素，您可以使用 javascript 来执行此操作。首先将 CSS 选择器 input:focus + div 重命名为 .my_div.animate。然后使用 javascript 添加/删除 .animate 类，如下所示：

// These have to match your elements
var my_input = document.querySelector(".my_input");
var my_div = document.querySelector(".my_div");

// Add class "animate" on focus
my_input.onfocus = function(){
    my_div.className = my_div.className + " animate";
};

// Remove class "animate" on blur
my_input.onblur = function(){
    my_div.className = my_div.className.replace( /(?:^|\s)animate(?!\S)/ , '' );
};

JSFiddle 上的演示。