Как управлять тенью элемента с помощью CSS? - PullRequest
Новая
       7

Как управлять тенью элемента с помощью CSS?

0 голосов
/ 06 июня 2018

Я играю с оживляющей тенью.Я хочу, чтобы это работало так: когда я нажимаю на поле, я хочу добавить класс "shadow".Когда это происходит, я хочу анимировать тень, как будто она поднимается вверх, а когда удаляю класс, я хочу, чтобы тень исчезала так же, как она выглядит (в обратном порядке).Я создал ключевые кадры и установил размытие и непрозрачность для изменения.Одна вещь, которую я замечаю, это то, что анимация не плавная, она пошаговая.Почему это так?Я хочу, чтобы теневая анимация была плавной.Во-вторых, как создать эту тень, которая также исчезнет, ​​когда класс будет удален?

Вот мой код: 

const box = document.querySelector(".box");
function shadowHandle(){
	box.classList.toggle("shadow");
}

box.addEventListener("click", shadowHandle);
body{
  margin: 100px;
}
.box{
  width: 100px;
  height: 300px;
  background-color: red;
}

@-webkit-keyframes shadow { /* Webkit */
	0%   { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
  25%  { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
	50%  { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
  75%  { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
	100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
@-moz-keyframes shadow { /* Webkit */
	0%   { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
  25%  { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
	50%  { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
  75%  { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
	100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
@keyframes shadow { /* Webkit */
	0%   { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
  25%  { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
	50%  { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
  75%  { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
	100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
.shadow {
	animation:         shadow 2s forwards; /* CSS3 */
	-moz-animation:    shadow 2s forwards; /* Firefox */
	-webkit-animation: shadow 2s forwards; /* Webkit */
}
<div class="box shadow"></div>

Ответы [ 4 ]

0 голосов
/ 06 июня 2018

Вам не нужны ключевые кадры.Это намного проще с переходом 

const box = document.querySelector(".box");
function shadowHandle(){
	box.classList.toggle("shadow");
}

box.addEventListener("click", shadowHandle);
body{
  margin: 100px;
}
.box{
  width: 100px;
  height: 300px;
  background-color: red;
  box-shadow: none;
  transition: all 1s ease;
  
}

.box.shadow {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
 }
<div class="box"></div>
0 голосов
/ 06 июня 2018

Я думаю, что использование перехода - путь сюда.Это оживит назад "середину анимации".

вот пример с: hover, но вы также можете использовать добавленный класс. 

.box{
  width: 100px;
  height: 100px;
  background: silver;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease-in-out;
}

.box:hover {
  box-shadow: -4px 0px 40px rgba(0, 0, 0, 1);
}
<div class="box">  
</div>
0 голосов
/ 06 июня 2018

Добавлен еще один класс анимации без теней с обратными стилями. 

@-webkit-keyframes no-shadow { /* Webkit */
    0%   { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
    25%  { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
    50%  { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
    75%  { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
    100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}
@-moz-keyframes no-shadow { /* Webkit */
    0%   { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
    25%  { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
    50%  { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
    75%  { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
    100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}
@keyframes no-shadow { /* Webkit */
    0%   { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
    25%  { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
    50%  { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
    75%  { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
    100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}

.no-shadow {
    animation:         no-shadow 2s forwards; /* CSS3 */
    -moz-animation:    no-shadow 2s forwards; /* Firefox */
    -webkit-animation: no-shadow 2s forwards; /* Webkit */
}


const box = document.querySelector(".box");
function shadowHandle(){
	box.classList.toggle("shadow");
	box.classList.toggle("no-shadow");
}

box.addEventListener("click", shadowHandle);
body{
  margin: 100px;
}
.box{
  width: 100px;
  height: 300px;
  background-color: red;
}

@-webkit-keyframes shadow { /* Webkit */
	0%   { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
	25%  { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
	50%  { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
	75%  { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
	100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
@-moz-keyframes shadow { /* Webkit */
	0%   { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
	25%  { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
	50%  { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
	75%  { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
	100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
@keyframes shadow { /* Webkit */
	0%   { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
	25%  { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
	50%  { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
	75%  { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
	100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
.shadow {
	animation:         shadow 2s forwards; /* CSS3 */
	-moz-animation:    shadow 2s forwards; /* Firefox */
	-webkit-animation: shadow 2s forwards; /* Webkit */
}

@-webkit-keyframes no-shadow { /* Webkit */
	0%   { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
	25%  { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
	50%  { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
	75%  { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
	100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}
@-moz-keyframes no-shadow { /* Webkit */
	0%   { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
	25%  { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
	50%  { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
	75%  { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
	100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}
@keyframes no-shadow { /* Webkit */
	0%   { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
	25%  { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
	50%  { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
	75%  { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
	100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}

.no-shadow {
	animation:         no-shadow 2s forwards; /* CSS3 */
	-moz-animation:    no-shadow 2s forwards; /* Firefox */
	-webkit-animation: no-shadow 2s forwards; /* Webkit */
}
<div class="box shadow"></div>
0 голосов
/ 06 июня 2018

Это может быть просто достигнуто с помощью transition
Следуйте приведенному ниже фрагменту:

Добавьте тень от блока к классу shadow, теперь добавьте CSS transition в `.box.

transition: all 1s linear
Это оживит все свойства css, которые можно анимировать
В течение 1с
В линейных ставка.Другие значения: ease ease-in ease-out и т. Д.

Поиграйте и узнайте. 

const box = document.querySelector(".box");

function shadowHandle() {
  box.classList.toggle("shadow");
}

box.addEventListener("click", shadowHandle);
body {
  margin: 100px;
}

.box {
  width: 100px;
  height: 300px;
  background-color: red;
  transition: all 1s linear;
}

.shadow {
  box-shadow: -4px 0px 40px rgba(0, 0, 0, 1);
}
<div class="box"></div>
...