CSS3: dziedziczyć nieruchomość do klatki kluczowej na 0%

Question

Mam następujący problem: chcę użyć animacji CSS3 z zasadami kluczowej (@keyframes myname {})

Problem jest, chcę używać pojedynczych at-reguły animacja klatki kluczowej dla wielu elementów, ale te elementy mają różne pozycje. Tak więc animacja @keyframes powinna dziedziczyć pierwotne właściwości selektora w regule 0% (lub od {}), więc animacja pochodziłaby z oryginalnej pozycji i rozmiaru selektora.

jak ten:

@keyframes myanim { 
    0% { 
    left: inherit; 
    top: inherit; 
width:inherit; 
height:inherit; 
    } 

    100% { 
top: 50%; 
left:50%; 
    width: 100%; 
    height: 60%; 
    } 
} 

I selektora:

.myselector-one { 
top:10em; 
left:0em; 
width:10em; 
height:5em; 
animation: myanim 1s; 
} 
.myselector-two { 
top:20em; 
left:30em; 
width: 15em; 
height: 8em; 
animation: myanim 1s; 
} 

celem jest dostać oryginalne właściwości każdego selektora, umieścić je na 0% klatki kluczowej w pozycji pochodzenia a wielkość i animować 100 % z tymi samymi właściwościami dla każdego selektora.

Czy to możliwe, czy muszę utworzyć animację dla każdego selektora? Problem polega na tym, że nie znałbym ich pozycji, ponieważ będzie ona obliczana dynamicznie.

Proszę, nie ma rozwiązania jQuery, tylko czysty CSS3! Nie chcę używać metody animate jQuery.

Answer 1

Hmmm, przyglądałem się temu problemowi od dłuższego czasu i nie sądzę, że jest to możliwe przy użyciu animacji CSS. Próbuję z this JSFiddle wiele różnych rzeczy i działa through tutorialsabout CSS Animations (widząc, jeśli ktoś wspomina ten sam problem), a także other informationabout it.

Potem doszedłem do realizacji tego, co próbujesz osiągnąć i myślę, że może jest łatwiejsze rozwiązanie. JEŚLI lokalizacje są obliczane dynamicznie, zakładam, że rzeczywiście używasz jakiegoś poziomu Javascript (lub jakiejś szalonej zaawansowanej metody obliczania CSS), więc przynajmniej pomyślałem, że ustawisz styl elementu DOM z nowymi pozycjami left lub top . Chociaż nie mówię o animacji jQuery, zamiast tego można użyć CSS3 Transitions w połączeniu z Javascriptem. Oznacza to, że zyskujesz niektóre zalety animacji CSS, takie jak obliczenia, które są bardziej natywne (sprzęt przyspieszony), a nie robione w JavaScript, ale tracisz na kilku rzeczach.

Co najważniejsze, nie ma żadnych zdarzeń przejściowych dla przeglądarki like there is for CSS Animations, ani nie można kontrolować drobnych elementów nad klatkami kluczowymi, ale można z nimi pracować dynamicznie. Proponuję tylko, aby twoje pytanie odnosiło się tylko do klatki kluczowej 0% i jednej z 100%.

Problem z tym, co próbujesz zrobić, polega na tym, że używanie animacji CSS musi być statyczne i nie będzie ciągnąć wartości, które były ustawione do animacji (w przeciwieństwie do przejść). Podczas korzystania z inherit, faktycznie próbujesz zrobić to używać top i left itp. from it's parent.

Ponownie, to nie spełnia twojego wymogu czystego CSS, ale używanie CSS Transitions oznacza tylko ograniczone manipulowanie DOM przez JavaScript, a nie to, co robi jQuery.

Oto another JSFiddle przy użyciu jQuery (tylko bardzo podstawowy javascript do ustawienia klasy lub style inline) i CSS Transitions.

HTML

<div class="myselector-one" id="a">Click Me</div> 
<div class="myselector-two" id="b">Click Me</div> 

JavaScript

document.getElementById("a").onclick = function() 
{ 
    if (this.className.indexOf("animate-complete")!=-1) 
    { 
     this.className = this.className.replace(/animate\-complete/g,""); 
    } 
    else 
    { 
     this.className += " animate-complete"; 
    } 
} 
var bIsTransitioned = false; 
document.getElementById("b").onclick = function() 
{ 
    if (!bIsTransitioned) 
    { 
     this.style.top = "50%"; 
     this.style.left = "50%"; 
     this.style.width = "100%"; 
     this.style.height = "60%"; 
    } 
    else 
    { 
     this.style.top = ""; 
     this.style.left = ""; 
     this.style.width = ""; 
     this.style.height = "";   
    } 
    bIsTransitioned = !bIsTransitioned; 
} 

CSS

.myselector-one { 
    top:10em; 
    left:0em; 
    width:10em; 
    height:5em; 
    transition:all 2s; 
    background-color:#ffaa99; 
    position:absolute; 
} 
.myselector-two { 
    top:4em; 
    left:30em; 
    width: 15em; 
    height: 8em; 
    transition:all 2s; 
    background-color:#aaff99; 
    position:absolute; 
} 
.animate-complete 
{ 
    top: 50%; 
    left:50%; 
    width: 100%; 
    height: 60%; 
}