html - 为 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 .