Polymer.dart와 함께 배포 된 (즉, light dom) 노드에서 Shadow Dom CSS 애니메이션 사용

마우스 입력과 마우스 왼쪽 버튼으로 움직이는 "Radial Selector"사용자 정의 요소를 만듭니다.Polymer.dart와 함께 배포 된 (즉, light dom) 노드에서 Shadow Dom CSS 애니메이션 사용

내가 지금처럼 반경 선택기 태그에 자신의 콘텐츠를 포장 할 수 있도록 내 사용자 지정 요소의 사용자 싶습니다

: 나는 빛의 DOM 어린이 애니메이션을하기 위해 노력하고있어

<radial-selector img="url(assets/phone.png)" style = "width: 200px; top:100px; left: 100px"> 
      <img src="assets/phone.png" style = "height: 50px; width: 50px"/> 
      <img src="assets/house.png" style = "height: 50px; width: 50px"/> 
      <img src="assets/house.png" style = "height: 50px; width: 50px"/> 
      <img src="assets/house.png" style = "height: 50px; width: 50px"/> 
      <img src="assets/house.png" style = "height: 50px; width: 50px"/> 
      <img src="assets/house.png" style = "height: 50px; width: 50px"/> 
</radial-selector>

를로를시키지 않고 내 요소의 그림자 DOM, 이는이 작업에 과도 함일 수있는 것처럼 보입니다. 명백한 캡슐화 이유로 이러한 애니메이션의 정의가 맞춤 요소의 템플릿 태그 내에 존재하기를 바랍니다. 삽입 태그를 사용하여 가벼운 DOM 노드를 사용자 정의 요소에 표시 한 다음 삽입 된 light DOM 노드를 :: content pseudo-selector를 사용하여 CSS 스타일로 대상 지정할 수 있기 때문에이 모든 작업을 수행 할 수 있다고 생각했습니다.

이 내가 다음 방사형 선택 html로 정의 할 뭘하려 :

<!DOCTYPE html> 

<polymer-element name="radial-selector"> 
    <template> 
    <style> 
    :host { 
    display: block; 
    position: absolute; 
    } 

    ::content .leaf { 
    position: absolute; 
    -webkit-transform: scale({{maxLeafScale}}, {{maxLeafScale}}); 
    opacity: {{maxLeafOpa}}; 
    } 

    ::content .expand { 

    -webkit-animation: expand 1s; 

    } 

    ::content .close { 
    -webkit-animation: close 1s; 
    } 

    ::content .bump { 
    -webkit-animation: bump 1s; 
    } 

    ::content .unbump { 
    -webkit-animation: unbump 1s; 
    } 

    ::content #stem { 
    position: absolute; 
    -webkit-transform: scale({{maxStemScale}}, {{maxStemScale}}); 
    } 


    @-webkit-keyframes expand { 
     from {opacity: {{currLeafOpa}}; 
      -webkit-transform: scale({{currLeafScale}}, {{currLeafScale}}); 
     } 
     to {opacity: {{maxLeafOpa}}; 
      -webkit-transform: scale({{maxLeafScale}}, {{maxLeafScale}}); 
     } 
    } 

    @-webkit-keyframes bump { 
    from { 
    -webkit-transform: scale({{currStemScale}}, {{currStemScale}}); 
    } 
    to { 
    -webkit-transform: scale({{maxStemScale}},{{maxStemScale}}); 

    } 
    } 

    @-webkit-keyframes unbump { 
    from { 
    -webkit-transform: scale({{currStemScale}}, {{currStemScale}}); 
    } 
    to { 
    -webkit-transform: scale({{minStemScale}}, {{minStemScale}}); 

    } 

    } 

    @-webkit-keyframes close { 

      from {opacity: {{currLeafOpa}}; 
      -webkit-transform: scale({{currLeafScale}}, {{currLeafScale}}); 
     } 
     to {opacity: {{maxLeafOpa}}; 
      -webkit-transform: scale({{minLeafScale}}, .{{minLeafScale}}); 
     } 

    } 
    </style> 
    <content></content> 
    </template> 
    <script type="application/dart" src="radialselector.dart"></script> 
</polymer-element>

그러나 요소가 전혀 애니메이션되지 않습니다. 적절한 이벤트에 대한 응답으로 적절한 클래스를 추가하고 제거합니다. 그러면 inspector는 클래스/스타일이 변경되었음을 보여줍니다.

:: content 의사 선택자는 일반 스타일 (예 : position : 절대)을 적용하지만 -webkit-animation 속성은 적용하지 않습니다. 어쩌면 @keyframes 정의가 여전히 그림자 돔에 완전히 살고 있기 때문일 수도 있습니다. :: content pseudo-selector를 추가하는 방법은 없습니다. 나는 시도했다 :: content @keyframes .. 등. 운이 없다.

총알을 물고 가벼운 DOM 아이들을 그림자 돔으로 가져와야하나요? 아니면 사용자 정의 요소에 정의 된 CSS 애니메이션을 사용하여 가벼운 DOM 자식을 애니메이션화하는 방법이 있습니까?

출처

2014-06-05 Luke Gehorsam

나는 @font-face과 같이 @keyframes이 문서 레벨 CSS에 있어야하므로 요소에서 가져와야합니다. 예를 들면 다음과 같습니다. http://jsbin.com/zisupu/6/edit

이전에는 Polymer 문서에 설명되어 있지만 주석 처리되었습니다. 권장 사항을 정리할 수 있는지 확인하기 위해 스레드를 열었습니다. https://github.com/Polymer/docs/issues/434

편집

오픈 Chromium bug #382498

출처

2014-06-08 23:59:56 robdodson

감사합니다. 그래, 내 생각에 요소에 @keyframes (및 다른 CSS 규칙)를 캡슐화하는 방법이 이상적입니다. 그 동안 그림자 DOM에 요소를 가져 오는 것이 좋습니다. –

Polymer.dart와 함께 배포 된 (즉, light dom) 노드에서 Shadow Dom CSS 애니메이션 사용

답변

관련 문제